一:改变按钮类型我们在项目中使用layui做前端的时候,就少不了表单form,但也有时候我们会使用layui的弹出层layer.open,来做一个弹出层表单,该弹出层有自己的btn(确定,取消按钮等等),那么如何对弹出层的表单做一个表单验证呢?
首先,我们改变按钮类型
我们要把layer弹出层的确定按钮,变成layui-form的提交按钮:
二、通过form.on实现第二步骤,就是把该layer弹出层表单属性改为layuo-form表单属性:
看下效果:
源码如下:
//JS layui.use(['element', 'layer', 'util', 'table', 'dropdown', 'laydate', 'form', 'util'], function () { var element = layui.element , layer = layui.layer , util = layui.util , $ = layui.$; var table = layui.table; var dropdown = layui.dropdown; var laydate = layui.laydate; var form = layui.form; // 创建渲染实例 table.render({ elem: '#test' , url: '../mapConfig/getConfig' , method: "get" , toolbar: '#toolbarDemo' , defaultToolbar: ['filter', 'exports', 'print', { title: '帮助' , layEvent: 'LAYTABLE_TIPS' , icon: 'layui-icon-tips' }] , height: 'full-200' , cols: [[ {type: 'checkbox', fixed: 'left'} , {field: 'configId', width: 80, title: 'configId', fixed: 'left'} , {field: 'expoName', width: 120, title: 'expoName', edit: 'text', fixed: 'left'} , {field: 'mapName', width: 80, title: 'mapName', edit: 'text'} , {field: 'picUrl', width: 80, title: 'picUrl', edit: 'text'} , {field: 'introduce', title: 'introduce', width: 150, edit: 'text'} , {field: 'startTime', width: 130, title: 'startTime', sort: true, edit: 'text'} , {field: 'endTime', title: 'endTime', width: 130, sort: true, edit: 'text'} , {field: 'boothNum', title: 'boothNum', width: 80, edit: 'text'} , {field: 'expoType', title: 'expoType', width: 80, edit: 'text'} , {field: 'mapType', title: 'mapType', width: 80, edit: 'text'} , {field: 'unityScene', title: 'unityScene', width: 120, edit: 'text'} , {field: 'spawnPos', title: 'spawnPos', width: 90, edit: 'text'} , {field: 'displayOrder', title: 'displayOrder', width: 110, edit: 'text'} , {field: 'abName', title: 'abName', width: 110, edit: 'text'} , {field: 'isClose', title: 'isClose', width: 80, edit: 'text'} , {field: 'adPosNum', title: 'adPosNum', width: 90, edit: 'text'} , {field: 'isTemplate', title: 'isTemplate', width: 100, edit: 'text'} , {field: 'previewPics', title: 'previewPics', width: 100, edit: 'text'} , {field: 'introduce2', title: 'introduce2', width: 80, edit: 'text'} , {field: 'picUrl2', title: 'picUrl2', width: 80, edit: 'text'} , {fixed: 'right', title: '操作', width: 125, minWidth: 125, toolbar: '#barDemo'} ]], parseData: function (res) { return { "code": 0, "msg": "", "count": res.length, "data": res.data } } , error: function (res, msg) { console.log(res, msg) } }); //触发单元格工具事件 table.on('tool(test)', function (obj) { if (obj.event === 'del') { layer.confirm('确认删除吗', function (index) { obj.del(); $.ajax({ type: "get", dataType: 'text', contentType: 'application/json', url: '../mapConfig/deleteConfig', data: { configId: obj.data.configId, }, success: function (result) { if (result) { layer.msg("删除成功") } } }) layer.close(index); }); } else if (obj.event === 'edit') { $.ajax({ type: "post", dataType: 'text', contentType: 'application/json;charset=utf-8', url: '../mapConfig/updateConfig', data:obj.data, success: function (result) { layer.msg("更新成功"); } , error: function (result) { layer.msg("更新失败") } }) } }); // 批量删除, $("#delSelect").on('click', function () { var checkStatus = table.checkStatus('test'), data = checkStatus.data; var configId = new Array(); if (data.length > 0) { for (var i in data) { configId[i] = data[i].configId; } $.ajax({ type: "get", dataType: 'text', traditional: true, contentType: 'application/json', url: '../mapConfig/deleteBatch', data: { configId: configId }, success: function (result) { location.reload(); } }) } else { layer.msg("请选择需要删除的行"); } }); //添加按钮的事件 $('#addNewInfo').on('click', function () { let newInfo = layer.open({ title: '新增' , content: $('#editPage')//页面选择器 , type: 1//页面选择器 , area: ['1000px'] , shade: 0.5 , btn: ['确认添加', '重置', '取消'], success: function (layero, index) { // 添加form标识 layero.addClass('layui-form'); // 将保存按钮改变成提交按钮 layero.find('.layui-layer-btn0').attr({ 'lay-filter': 'formButton', 'lay-submit': '' }); form.render(); } , yes: () => { form.on('submit(formButton)', function () { const formData = layui.form.val("formId"); $.ajax({ type: "post", dataType: 'json', traditional: true, contentType: "application/json;charset=utf-8", url: '../mapConfig/addConfig', data: JSON.stringify(formData), success: function (result) { if (result.status === 0) { layer.msg("添加成功"); location.reload(); } else { layer.msg("该configId已经存在"); } }, error: function (result) { layer.msg("添加失败"); } }) layer.close(); }) } , btn2: function () { // 重置清空 $('#formId')[0].reset(); form.render();//必须写 }, btn3: function (index, layero) { } , cancel: function () { } }) }) //日历 laydate.render({ elem: '#startTime', //指定元素 type: "datetime" }); laydate.render({ elem: '#endTime', type: "datetime" }); });