鲁达 layer是一个非常优秀的，界面较好，参数多，回调多，二开容易的一个弹窗为主的插件，也是在平常切图（qie）中使用频率较高的一款插件，layerui在其他表单，表格等元素上也逐渐跟上，形成了一套完整的ui体系，在近期的一个layui后台页面制作中遇到的问题-“弹出表单，并且验证”，这个时候需要用到layui自带的弹窗+表单验证组合实现，附代码片段，亲测有效。
layui.config({ base: 'layuiadmin/' //静态资源所在路径 }).extend({ index: 'lib/index' //主入口模块 }).use(['index', 'upload','form', 'laydate','table','dropdown'], function(){ var dropdown = layui.dropdown; // 监听菜单点击 dro('test1', function (event) { // ...业务代码 con(event); }) //form var $ = layui.$ ,admin = layui.admin ,element = layui.element ,form = layui.form ,layer = layui.layer ,table = layui.table ,laytpl = layui.laytpl; element.render(); // 复选框 ('checkbox(choiceOne)', function (data) { con(data); var len = $("input:checked").length; if (len < 1) { $).next().attr("class", "layui-unselect layui-form-checkbox"); $).prop("checked", false); layer.msg('是否显示，请至少选择一项！', { icon: 5 }); return false; } }); ('submit(demo1)', function (data) { var len = $("input:checked").length; if (len < 1) { layer.msg('是否显示，请至少选择一项！', { icon: 2 }); return false; } }); //全选 反选 ('checkbox(allChoose)', function(data){ var child = $).parents('table').find('tbody input[type="checkbox"]'); // 复选框总数 c(function(index, item){ i = da; }); ('checkbox'); }); // 全选时哟有一个取消选中，改为未全选 ('checkbox(choiceOne)', function(data){ var child = $).parents('table').find('tbody input[type="checkbox"]'); // 复选框总数 var childed = $).parents('table').find('tbody input[type="checkbox"]:checked'); // 选中的复选框总数 i == c){ $).parents('table').find('.checkboxAll').prop("checked", true); ('checkbox'); }else{ $).parents('table').find('.checkboxAll').prop("checked", false); ('checkbox'); } }); //自定义验证规则 ({ }); //表单提交 ('submit(component-form-element)', function(data){ layer.msg)); return false; }); //laydate var laydate = layui.laydate; //同时绑定多个 lay('.laydate-item').each(function(){ layda({ 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': '' }); (); }, btn:['确定','关闭'], yes:function(){ ('submit(formDemo)', function (data) { //表单数据formData var formData = da; 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': '' }); (); }, btn:['确定','关闭'], yes:function(){ ('submit(formadd)', function (data) { //表单数据formData var formData = da; 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': '' }); (); }, btn:['确定','关闭'], yes:function(){ ('submit(formedit)', function (data) { //表单数据formData var formData = da; layer.msg('提交'); }); }, btn2:function(){ }, }); }) });