前言
在使用layui弹出层时，想着在点击弹出层中“确定”按钮时，也能触发弹出层中form表单的验证。最后找到一个还算可以的答案，参考https://fly.layui.com/jie/5581/，结合自己的理解，实现了这个功能。
具体实现
整体思路就是在弹出层form表单页面中设置一个隐藏的提交按钮，然后在layer弹出层点击“确定”按钮时，找到form表单中隐藏的提交按钮，触发点击事件，即可实现验证功能。
这里使用的是部门信息html文件：departmentList.html和addDepartment.html。
重点查看新增部门的js代码段和form表单中设置的隐藏提交按钮即可。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link th:href="@{~/layui/css/layui.css}" rel="stylesheet"/>
</head>
<body>
<button class="layui-btn" id="add">
<i class="layui-icon"></i> 添加
</button>
<table id="depOperation" lay-filter="depOperation"></table>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
<script th:src="@{~/layui/layui.js}"></script>
<script type="text/javascript" th:inline="none">
var rowData; // 用于接收表格一行数据的全局变量
layui.use(['table','layer'],function () {
var table = layui.table;
var layer = layui.layer;
// var form = layui.form;
renderTable();
function renderTable() {
table.render({
elem: '#depOperation',
height: '350',
url: '/department/info',
page: true,
cols: [
[
{field: 'dId', title: 'ID', width:200, sort: true, fixed: 'left'},
{field: 'dName', title: '部门名称', width:200, edit:'text'},
{field: 'dWorktime', title: '上班时间', width:300},
{title: '操作', toolbar: '#barDemo'}
]
],
done: function () { // 隐藏id那一列
$("[data-field='dId']").css('display','none');
}
});
}
// 新增部门
$('#add').on('click',function () {
layer.open({
title: '添加部门',
type: 2,
content: './addDepartment', // 设置跳转的url，跳转到对应的页面
area: ['400px','400px'],
btn: ['添加','取消'],
yes: function (index,layero) {
// // 获取弹出层中的form表单元素
// var formSubmit=layer.getChildFrame('form', index);
// // 提交form表单（不会触发表单验证）
// formSubmit.submit();
// 获取弹出层中的form表单元素
var formSubmit=layer.getChildFrame('form', index);
// 获取表单中的提交按钮（在我的表单里第一个button按钮就是提交按钮，使用find方法寻找即可）
var submited = formSubmit.find('button')[0];
// 触发点击事件，会对表单进行验证，验证成功则提交表单，失败则返回错误信息
submited.click();
// 弹出层关闭的操作在子层的js代码中完成
}
});
});
// 监听工具条
table.on('tool(depOperation)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
// 将监听到的该行数据赋值给父层rowData全局变量，再传到子层中进行操作
rowData = JSON.stringify(data);
// 查看该行数据
if(layEvent === 'detail'){
layer.open({
title: '查看信息',
type: 2,
content: './showDepartment', // 设置跳转的url，跳转到对应的页面
area: ['400px','400px'],
skin: 'layui-layer-lan' // 蓝色皮肤
});
}
// 编辑该行数据
if(layEvent === 'edit') {
layer.open({
title: '编辑信息',
type: 2,
content: './editDepartment', // 设置跳转的url，跳转到对应的页面
area: ['400px','400px'],
skin: 'layui-layer-molv', // 墨绿色皮肤
btn: ['提交','取消'],
yes: function (index,layero) {
// // 获取弹出层中的form表单元素
// var formSubmit=layer.getChildFrame('form', index);
// // 提交form表单
// formSubmit.submit();
// 获取弹出层中的form表单元素
var formSubmit=layer.getChildFrame('form', index);
// 获取表单中的提交按钮（在我的表单里第一个button按钮就是提交按钮，使用find方法寻找即可）
var submited = formSubmit.find('button')[0];
// 触发点击事件，会对表单进行验证，验证成功则提交表单，失败则返回错误信息
submited.click();
// 弹出层关闭的操作在子层的js代码中完成
}
});
}
// 删除该行数据
if(layEvent === 'del') {
layer.confirm("确认删除该行数据？",{btn:['确定','取消'],title:'删除确认'},function () {
var dId = data.dId;
$.ajax({
type: 'post',
dataType: 'text',
url: '/department/delDepartment/' + dId,
data: {},
cache: false,
async: true,
success: function (data) {
var delData = JSON.parse(data);
layer.msg(delData.successMsg,{icon:1});
// 刷新表格
$('.layui-laypage-btn').click();
},
error: function (data) {
var delData = JSON.parse(data);
layer.msg(delData.errMsg,{icon:2});
}
});
})
}
});
})
</script>
<!-- 定义表格操作的代码 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html><!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link th:href="@{~/layui/css/layui.css}" rel="stylesheet"/>
</head>
<body>
<form class="layui-form" th:action="@{~/department/addDepartmentSubmit}" method="post">
<input type="hidden" name="dId">
<div class="layui-form-item">
<label class="layui-form-label">部门名称</label>
<div class="layui-input-inline">
<input type="text" name="dName" class="layui-input" placeholder="请输入部门名称" required lay-verify="required|depName">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">上班时间</label>
<div class="layui-input-inline">
<input type="text" name="dWorktime" class="layui-input" placeholder="格式：hh:mm:ss" required lay-verify="required|depWorktime">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<!-- 隐藏提交按钮，在父层中调用 -->
<button id="addDepartment" class="layui-btn" lay-filter="formVerify" lay-submit style="display: none">添加</button>
</div>
</div>
</form>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
<script th:src="@{~/layui/layui.js}"></script>
<script>
layui.use(['form'],function () {
var form = layui.form;
form.verify({
depName: function (value,item) { //value：表单的值、item：表单的DOM对象
if(value.length < 0){
return '部门名称不能为空';
}
},
depWorktime: function (value,item) {
if(value.length < 0){
return '请输入上班时间';
}
if(! new RegExp("^(([01][1-9])|(2[0-4])):[0-5][0-9]:[0-5][0-9]$").test(value)){
return '请按照指定格式输入';
}
}
});
// 验证成功后才会执行下面的操作
form.on('submit(formVerify)',function (data) {
// 提交成功后返回信息，关闭弹出层
parent.layer.msg('操作成功',{
icon:1,
time: 2000
});
//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index);
// 刷新表格（即点击分页控件的“确定”按钮）
parent.$('.layui-laypage-btn').click();
});
});
</script>
</body>
</html>这样就能实现具体的表单验证了。
今天的文章点击layer弹出层按钮实现弹出层中form表单验证分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/31337.html
