备案控制台
开发者社区 开发与运维 文章 正文

前端|Layui实现表单

2023-06-21 216
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端|Layui实现表单

  1. 1.  首先到Layui官网下载

http://www.layui.com/


  1. 2.  创建项目
  2. 3.  导入

把压缩包解压，把整个文件拷贝到项目的目录下，


  1. 4.  然后在head中导入


再导入


  1. 5.  表单元素

（1）输入框

（2）密码框

（3）下拉列表，[重新渲染]要加入layui-form 引入form模块,lay-search是支持下拉的输入过滤

（4）单选框，[重新渲染]要加入layui-form 引入form模块（5）复选框，[重新渲染]要加入layui-form 引入form模块,lay-skin="primary"使用原始是的样式

（6）开关，[重新渲染]要加入layui-form 引入form模块,使用checkbox实现,lay-skin="switch"使用皮肤

（7）文本域

（8） 富文本，要引入富文本的模块layedit，创建一个编辑器

<form class="layui-form  " action=""><!--layui-form-pane 表单两种样式 -->

             <!--单行输入框-->

             <div class="layui-form-item">

                <label class="layui-form-label">用户名:</label>

                <div class="layui-input-block">

                    <!--lay-verify做非空验证-->

                    <input type="text"  name="username" lay-verify="true" autocomplete="off" placeholder="输入用户名" class="layui-input">

                </div>

            </div>

            <div class="layui-form-item">

                <label class="layui-form-label">用户密码:</label>

                <div class="layui-input-block"><!--block块-->

                    <!--lay-verify做非空验证-->

                    <input type="password"  name="password" lay-verify="true" autocomplete="off" placeholder="输入用密码" class="layui-input">

                </div>

            </div>

           

            <!--多行输入框-->

            <!--响应式布局-->

            <div class="layui-form-item">

                <div class="layui-inline"><!--inline行-->

                    <label class="layui-form-label">用户手机</label>

                    <div class="layui-input-inline">

                    <!--lay-verify="required|phone"非空验证并且输入的是手机号-->

                        <input type="tel"  name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">

                    </div>

                </div>

                <div class="layui-inline">

                    <label class="layui-form-label">用户邮箱</label>

                        <div class="layui-input-inline">

                        <input type="text"  name="email" lay-verify="email" autocomplete="off" class="layui-input">

                    </div>

                </div>

                <div class="layui-inline">

                    <label class="layui-form-label">用户邮箱</label>

                        <div class="layui-input-inline">

                        <input type="text"  name="email" lay-verify="email" autocomplete="off" class="layui-input">

                    </div>

                </div>

            </div>

           

            <!--下拉列表-->

            <div class="layui-form-item">

                <label class="layui-form-label">单行选择框</label>

                <div class="layui-input-block">

                    <select name="interest"  lay-filter="aihao"><!-- lay-filter="aihao"通过layui的方法找到aihao-->

                        <option value=""></option>

                        <option value="0">写作</option>

                        <option value="1" selected="">阅读</option>

                        <option value="2">游戏</option>

                        <option value="3">音乐</option>

                        <option value="4">旅行</option>

                    </select>

                </div>

            </div>

            <div class="layui-form-item">

               <div class="layui-inline">

                <label class="layui-form-label">籍贯</label>

                <div class="layui-input-inline">

                    <!-- lay-search=""搜索选择并且有联想过滤功能-->

                    <select name="jiguan"  lay-filter="jiguan" lay-search="">

                        <option value=""></option>

                        <option value="0">湖北</option>

                        <option value="1" selected="">湖南</option>

                        <option value="2">北京</option>

                        <option value="3">四川</option>

                      

                    </select>

                </div>

                </div>

            </div>

           

           

            <!--单选框-->

            <div class="layui-form-item">

                <label class="layui-form-label">性别</label>

                <div class="layui-input-block">

                    <input type="radio"  name="sex" value="男" title="男" checked="">

                    <input type="radio"  name="sex" value="女" title="女">

                    <input type="radio"  name="sex" value="禁" title="禁用" disabled=""><!--disabled=""禁用-->

                </div>

            </div>

           

            <!--复选框两种-->

            <!--复选框-->

            <div class="layui-form-item">

                <label class="layui-form-label">复选框</label>

                <div class="layui-input-block">

                    <input type="checkbox"  name="like[write]" title="写作">

                    <input type="checkbox"  name="like[read]" title="阅读">

                    <input type="checkbox"  name="like[daze]" title="发呆">

                </div>

            </div>

            <!--原始复选框-->

            <div class="layui-form-item" pane="">

                <label class="layui-form-label">原始复选框</label>

                <div class="layui-input-block">

                    <!--lay-skin="primary"使用原始是的样式-->

                    <input type="checkbox"  name="like1[write]" lay-skin="primary" title="写作" checked="">

                    <input type="checkbox"  name="like1[read]" lay-skin="primary" title="阅读">

                    <input type="checkbox"  name="like1[game]" lay-skin="primary" title="游戏" disabled="">

                </div>

            </div>

           

           

            <!--开关-->

            <div class="layui-form-item" pane="">

                <label class="layui-form-label">开关</label>

                <div class="layui-input-block">

                    <!--就是一个checkbox ,lay-skin="switch"相当于给他加一个皮肤-->

                    <!--lay-text="ON|OFF"，开/关显瘦的文字-->

                    <input type="checkbox"  checked="" lay-skin="switch" lay-filter="switchTest"  lay-text="ON|OFF">

                   

                </div>

            </div>

           

           

            <!--文本域-->

            <div class="layui-form-item layui-form-text">

                <label class="layui-form-label">普通文本域</label>

                <div class="layui-input-block">

                    <textarea placeholder="请输入内容" class="layui-textarea"></textarea>

                </div>

             </div>

           

            <!--富文本编辑器-->

            <!--这里不支持图片上传，上传图片还要配置插入图片接口、文件上传等-->

            <div class="layui-form-item  layui-form-text">

                <label class="layui-form-label">编辑器</label>

                <div class="layui-input-block">

                    <textarea class="layui-textarea  layui-hide" name="content"  lay-verify="content" id="LAY_demo_editor"></textarea>

                </div>

            </div>

       </form>

 

<script type="text/javascript">

            layui.use(['form', 'layedit', 'laydate'], function(){

            var form = layui.form,//引入from模块

            layer  = layui.layer,//弹出层

            layedit  = layui.layedit,//富文本的一个模块

            laydate  = layui.laydate;

           

 

            //创建一个编辑器

            var editIndex = layedit.build('LAY_demo_editor');

 

 

            });

        </script>

 

 


<form class="layui-form"  action="" lay-filter="dataForm">

             <!--单行输入框-->

             <div class="layui-form-item">

                <label class="layui-form-label">用户名:</label>

                <div class="layui-input-block">

                    <!--lay-verify做非空验证-->

                    <input type="text"  name="username" lay-verify="username" autocomplete="off" placeholder="输入用户名" class="layui-input">

                </div>

            </div>

            <div class="layui-form-item">

                <label class="layui-form-label">用户密码:</label>

                <div class="layui-input-block"><!--block块-->

                    <!--lay-verify做非空验证-->

                    <input type="password"  name="pwd" lay-verify="pass" autocomplete="off"  placeholder="输入用密码" class="layui-input">

                </div>

            </div>

           

            <!--多行输入框-->

            <div class="layui-form-item">

                <div class="layui-inline">

                    <label class="layui-form-label">用户手机</label>

                    <div class="layui-input-inline">

                    <!--lay-verify="required|phone"非空验证并且输入的是手机号-->

                        <input type="tel"  name="phone"lay-verify="required|phone" autocomplete="off"  class="layui-input">

                    </div>

                </div>

                <div class="layui-inline">

                    <label class="layui-form-label">用户邮箱</label>

                        <div class="layui-input-inline">

                        <input type="text"  name="email"  autocomplete="off"  class="layui-input">

                    </div>

                </div>

               

            </div>

           

            <!--下拉列表-->

            <div class="layui-form-item">

                <label class="layui-form-label">籍贯</label>

                <div class="layui-input-block">

                    <select name="jiguan"  lay-filter="jiguan" id="jiguan" lay-search=""><!-- lay-filter="aihao"通过layui的方法找到aihao-->

                        <option value="wuhan">武汉</option>

                        <option value="shanghai">上海</option>

                        <option value="beijing"  selected="">北京</option>

                       

                    </select>

                </div>

            </div>

           

            <!--单选框-->

            <div class="layui-form-item">

                <label class="layui-form-label">性别</label>

                <div class="layui-input-block">

                    <input type="radio"  lay-filter="sex" name="sex" value="男" title="男" checked="">

                    <input type="radio"  lay-filter="sex" name="sex" value="女" title="女">

                    <input type="radio"  lay-filter="sex" name="sex" value="禁" title="禁用" disabled=""><!--disabled=""禁用-->

                </div>

            </div>

           

            <!--复选框-->

            <div class="layui-form-item">

                <label class="layui-form-label">爱好</label>

                <div class="layui-input-block">

                    <input type="checkbox"  lay-filter="hoppy" value="写作" name="hoppy1" title="写作">

                    <input type="checkbox"  lay-filter="hoppy" value="阅读" name="hoppy2" title="阅读">

                    <input type="checkbox"  lay-filter="hoppy" value="发呆" name="hoppy3" title="发呆">

                </div>

            </div>

           

           

            <!--开关-->

            <div class="layui-form-item" pane="">

                <label class="layui-form-label">开关</label>

                <div class="layui-input-block">

                    <!--就是一个checkbox ,lay-skin="switch"相当于给他加一个皮肤-->

                    <input type="checkbox"  lay-filter="kaiguan" checked="" lay-skin="switch"  name="kaiguan" lay-text="ON|OFF">

                   

                </div>

            </div>

            <!--提交按钮-->

            <div class="layui-form-item">

                <div class="layui-input-block">

                    <!--lay-submit=""  验证作用删除后不能验证

                        lay-filter="demo1"监听提交事件

                    -->

                    <button type="submit"  class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>

                    <button type="reset"  class="layui-btn layui-btn-primary">重置</button>

                    <button type="button"  class="layui-btn" id="bnt1">向select中添加一个深圳</button>

                    <button type="button"  class="layui-btn" id="bnt2">初始化表单</button>

                </div>

            </div>

          

           

           

     </form>


<script type="text/javascript">

            layui.use(['element','jquery', 'laydate','form',], function(){

            var $=layui.jquery,

            element =layui.element,

            layer = layui.layer,       

            laydate = layui.laydate

            form = layui.form;

           

           

            //1.监听提交事件

//          submit(*)中的*是适配所有意思,适配所有加了lay-submit=""

            form.on('submit(demo1)', function(data){

                console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象

                console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回

                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

//              return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。即：阻止同步提交。

            });

//          2.监听下拉框的改变事件

            form.on('select(jiguan)', function(data){

                console.log(data.elem); //得到select原始DOM对象

                console.log(data.value); //得到被选中的值

                console.log(data.othis); //得到美化后的DOM对象

            });

//          3.监听checkbox框的改变事件

            form.on('checkbox(hoppy)', function(data){

                console.log(data.elem); //得到checkbox原始DOM对象

                console.log(data.elem.checked); //是否被选中，true或者false

                console.log(data.value); //复选框value值，也可以通过data.elem.value得到

                console.log(data.othis); //得到美化后的DOM对象

            }); 

//          4.监听开关的改变事件

            form.on('switch(kaiguan)', function(data){

                console.log(data.elem); //得到checkbox原始DOM对象

                console.log(data.elem.checked); //开关是否开启，true或者false

                console.log(data.value); //开关value值，也可以通过data.elem.value得到

                console.log(data.othis); //得到美化后的DOM对象

            });

//          5.监听单选radio的改变事件

            form.on('radio(sex)', function(data){

                console.log(data.elem); //得到radio原始DOM对象

                console.log(data.value); //被点击的radio的value值

            }); 

//          6.元素渲染

//          向select中添加一个深圳

            $("#bnt1").click(function(){

               //得到select对象

               var jg=$("#jiguan");

               alert(jg.html());

               jg.append("<option value='shenzhen'>深圳</option>");

               alert(jg.html());

//             更新渲染，渲染

//               form.render("select");

//            渲染所有的，渲染所有的下拉框,单选框,复选框等

                form.render();

            });

//         

//          7.初始化表单，表单赋值

            $("#bnt2").click(function(){

               form.val("dataForm",{

                   username:'大明',

                   pwd:"123456",

                   phone:'13344445555',

                   email:'12334@qq.com',

                   jiguan:'beijing',

                   sex:'女',

                    hoppy1:true,//注意

                   kaiguan:false,

                  

                  

               });

              

            });

           

//          表单验证，使用方法：加lay-verify=""

 

//          相关值

//          required 非空验证

//          phone 手机号验证

//          number 数值验证

//          url 链接地址验证

 

//          扩展自定义验证规则

          form.verify({

               username: [

                    /^[\S]{6,12}$/

                    ,'用户名必须6到12位，且不能出现空格'

                ],

                pass: [

                    /^[\S]{6,12}$/

                    ,'密码必须6到12位，且不能出现空格'

                ]

               

            });

           

           

          

});

</script>

 

 

  1. 6.  表单对象

（1）监听提交事件

（2）监听下拉框改变事件

（3）监听复选框改变事件

（4）监听开关改变事件

（5）监听单选框改变事件

（6）更新渲染

（7）初始化表单

（8）表单验证


文章标签：
JavaScript
前端开发
容器
数据安全/隐私保护
关键词：
前端layui
前端表单
greework
目录
相关文章
穆雄雄.
|
6天前
|
JSON 前端开发 Java
layui上传图片，前端直接拷代码，后端……
layui上传图片，前端直接拷代码，后端……
穆雄雄.
64 0
阑梦清川
|
6天前
|
前端开发
Web前端---表格和表单
Web前端---表格和表单
阑梦清川
32 1
码上来科技
|
6月前
|
前端开发
layui在上传图片在前端处理图片压缩
layui在上传图片在前端处理图片压缩
码上来科技
64 0
前端技术栈
|
6天前
|
前端开发 小程序
前端解析支付宝返回form表单，自动跳转支付
前端解析支付宝返回form表单，自动跳转支付
前端技术栈
128 1
阿甘兄
|
7月前
|
前端开发 JavaScript
前端基础 - JavaScript之表单获取焦点及失去焦点
前端基础 - JavaScript之表单获取焦点及失去焦点
阿甘兄
81 0
Java方文山
|
8月前
|
设计模式 JSON 前端开发
前端框架Layui实现动态树效果（书籍管理系统左侧下拉列表）（一）
前端框架Layui实现动态树效果（书籍管理系统左侧下拉列表）
Java方文山
174 0
Java方文山
|
8月前
|
前端开发 JavaScript 安全
前端框架Layui实现动态选项卡&iframe使用（附源码）
前端框架Layui实现动态选项卡&iframe使用（附源码）
Java方文山
594 0
Java方文山
|
8月前
|
前端开发 JavaScript Java
前端框架Layui实现动态树效果（书籍管理系统左侧下拉列表）（二）
前端框架Layui实现动态树效果（书籍管理系统左侧下拉列表）（二）
Java方文山
40 0
游客7ofzsdfcat7ls
|
6天前
|
前端开发 API 开发者
layui：从崛起到蜕变，前端框架的华丽篇章
layui：从崛起到蜕变，前端框架的华丽篇章
游客7ofzsdfcat7ls
78 7
阿甘兄
|
7月前
|
JavaScript 前端开发
前端基础 -JQuery之 表单选择器
前端基础 -JQuery之 表单选择器
阿甘兄
30 0

热门文章

最新文章

  • 1
    对象存储OSS产品常见问题之前端直传视频获取视频的长度获得多少秒如何解决
  • 2
    前端vue2、vue3去掉url路由“ # ”号——nginx配置（二）
  • 3
    前端安全：Vue应用中防范XSS和CSRF攻击
  • 4
    Node.js在前端的妙用：打造更出色的Web体验
  • 5
    🌟前端使用Lottie实现炫酷的开关效果🌟
  • 6
    前端舞台上的优雅独舞：代码规范的奥秘
  • 7
    relectron框架——打包前端vue3、react为pc端exe可执行程序
  • 8
    利用深度学习技术提升前端图像处理性能
  • 9
    探寻前端巨变：从HTML到现代框架的发展历程
  • 10
    前端vue3分享——项目封装axios、vite使用env环境变量
  • 1
    构建响应式Web界面：现代前端开发的最佳实践
    65
  • 2
    探索现代Web应用中的微前端架构
    35
  • 3
    构建高效前端项目：模块化与组件化策略
    39
  • 4
    前端发展趋势：WebAssembly、PWA 和响应式设计
    36
  • 5
    前端开发新趋势：Web3、区块链和虚拟现实
    44
  • 6
    架构的未来：微前端与微服务的融合
    76
  • 7
    前端模块规划
    17
  • 8
    调试前端时，在浏览器上修改参数并重新调用接口
    54
  • 9
    大屏前端技术要求
    28
  • 10
    优酷OTT互联网大屏前端技术实现
    21

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考