layer是一个非常优秀的，界面较好，参数多，回调多，二开容易的一个弹窗为主的插件，也是在平常切图（qietu.com）中使用频率较高的一款插件，layerui在其他表单，表格等元素上也逐渐跟上，形成了一套完整的ui体系，在近期的一个layui后台页面 *** 中遇到的问题-“弹出表单，并且验证”，这个时候需要用到layui自带的弹窗+表单验证组合实现，附代码片段，亲测有效。
layui.config({ base: 'layuiadmin/' //静态资源所在路径 }).extend({ index: 'lib/index' //主入口模块 }).use(['index', 'upload','form', 'laydate','table','dropdown'], function(){ var dropdown = layui.dropdown; // 监听菜单点击 dropdown.onFilter('test1', function (event) { // ...业务代码 console.log(event); }) //form var $ = layui.$ ,admin = layui.admin ,element = layui.element ,form = layui.form ,layer = layui.layer ,table = layui.table ,laytpl = layui.laytpl; element.render(); // 复选框 form.on('checkbox(choiceOne)', function (data) { console.debug(data); var len = $("input:checked").length; if (len < 1) { $(data.elem).next().attr("class", "layui-unselect layui-form-checkbox"); $(data.elem).prop("checked", false); layer.msg('是否显示，请至少选择一项！', { icon: 5 }); return false; } }); form.on('submit(demo1)', function (data) { var len = $("input:checked").length; if (len < 1) { layer.msg('是否显示，请至少选择一项！', { icon: 2 }); return false; } }); //全选 反选 form.on('checkbox(allChoose)', function(data){ var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]'); // 复选框总数 child.each(function(index, item){ item.checked = data.elem.checked; }); form.render('checkbox'); }); // 全选时哟有一个取消选中，改为未全选 form.on('checkbox(choiceOne)', function(data){ var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]'); // 复选框总数 var childed = $(data.elem).parents('table').find('tbody input[type="checkbox"]:checked'); // 选中的复选框总数 if(childed.length == child.length){ $(data.elem).parents('table').find('.checkboxAll').prop("checked", true); form.render('checkbox'); }else{ $(data.elem).parents('table').find('.checkboxAll').prop("checked", false); form.render('checkbox'); } }); //自定义验证规则 form.verify({ }); //表单提交 form.on('submit(component-form-element)', function(data){ layer.msg( *** ON.stringify(data.field)); return false; }); //laydate var laydate = layui.laydate; //同时绑定多个 lay('.laydate-item').each(function(){ laydate.render({ elem: this ,trigger: 'click' // ,type: 'month' // ,format: 'yyyy-MM' }); }); //添加权限分组 $('#addrolegroup').click(function(){ layer.closeAll(); layer.open({ type: 1, title :'提示', shade :false, //offset:'rb', //offset:[0, 0], skin: 'layui-layer-rim', //加上边框 area: ['450px', '300px'], //宽高 content: $('#tanchuang'), success: function (layero) { $(':focus').blur(); // 添加form标识 layero.addClass('layui-form'); // 将保存按钮改变成提交按钮 layero.find('.layui-layer-btn0').attr({ 'lay-filter': 'formDemo', 'lay-submit': '' }); form.render(); }, btn:['确定','关闭'], yes:function(){ form.on('submit(formDemo)', function (data) { //表单数据formData var formData = data.field; layer.msg('提交'); // $.ajax({ // "url": '', // "data": formData, // "type": "POST", // "success": function () { // // layer.alert('添加成功', { // skin: 'layui-layer-molv', // closeBtn: 0 // }) // }, // "error": function (data) { // layer.alert('添加失败', { // skin: 'layui-layer-molv', // closeBtn: 0 // }) // } // }) }); }, btn2:function(){ }, }); }) //添加权限 $('.addrole').click(function(){ layer.closeAll(); layer.open({ type: 1, title :'提示', shade :false, //offset:'rb', //offset:[0, 0], skin: 'layui-layer-rim', //加上边框 area: ['450px', '300px'], //宽高 content: $('#tjtanchuang'), success: function (layero) { $(':focus').blur(); // 添加form标识 layero.addClass('layui-form'); // 将保存按钮改变成提交按钮 layero.find('.layui-layer-btn0').attr({ 'lay-filter': 'formadd', 'lay-submit': '' }); form.render(); }, btn:['确定','关闭'], yes:function(){ form.on('submit(formadd)', function (data) { //表单数据formData var formData = data.field; layer.msg('提交'); }); }, btn2:function(){ }, }); }) //修改权限 $('.editrole').click(function(){ layer.closeAll(); layer.open({ type: 1, title :'提示', shade :false, //offset:'rb', //offset:[0, 0], skin: 'layui-layer-rim', //加上边框 area: ['450px', '300px'], //宽高 content: $('#xgtanchuang'), success: function (layero) { $(':focus').blur(); // 添加form标识 layero.addClass('layui-form'); // 将保存按钮改变成提交按钮 layero.find('.layui-layer-btn0').attr({ 'lay-filter': 'formedit', 'lay-submit': '' }); form.render(); }, btn:['确定','关闭'], yes:function(){ form.on('submit(formedit)', function (data) { //表单数据formData var formData = data.field; layer.msg('提交'); }); }, btn2:function(){ }, }); }) });
