我们在项目中使用
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'
/* ,page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
,curr: 1 //设定初始在第 5 页
,groups: 2 //只显示 1 个连续页码
,first: true //不显示首页
,last: true //不显示尾页
}*/
, 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"
});
});
