微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
- 1. 首先到Layui官网下载
- 2. 创建项目
- 3. 导入
把压缩包解压，把整个文件拷贝到项目的目录下，
- 4. 然后在head中导入
再导入
- 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> |
- 6. 表单对象
（1）监听提交事件
（2）监听下拉框改变事件
（3）监听复选框改变事件
（4）监听开关改变事件
（5）监听单选框改变事件
（6）更新渲染
（7）初始化表单
（8）表单验证
END
主 编 | 张祯悦
责 编 | 舒寒同行JT
where2go 团队
微信号：算法与编程之美
长按识别二维码关注我们!
“写留言”发表评论，期待您的参与！期待您的转发！
