前言
在使用layui弹出层时，想着在点击弹出层中“确定”按钮时，也能触发弹出层中form表单的验证。
具体实现
整体思路就是在弹出层form表单页面中设置一个隐藏的提交按钮，然后在layer弹出层点击“确定”按钮时，找到form表单中隐藏的提交按钮，触发点击事件，即可实现验证功能。
这里使用的是两个测试HTML：list.html和add.html。
重点查看新增部门的js代码段和form表单中设置的隐藏提交按钮即可。
- list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>demo</title>
<link rel="stylesheet" href="../../lib/layuiadmin/layui/css/layui.css" media="all">
<style>
body {
margin: 10px;
}
.demo-carousel {
height: 200px;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="demo">
<button type="button" class="layui-btn layui-btn-primary" @click="add">按钮验证</button>
</div>
<script src="../../lib/jquery/jquery-2.0.1.min.js"></script>
<script src="../../lib/vue/vue.min.js"></script>
<script src="../../lib/layuiadmin/layui/layui.js"></script>
<script>
layui.use('layer');
var vue = new Vue({
el: '.demo',
data() {
return {}
},
methods: {
add:function () {
var index = layer.open({
type: 2,
content: './add.html',
area: ['600px', '800px'],
btn: ['保存', '取消'],
yes: function (index, layero) {
var formSubmit=layer.getChildFrame('form', index);
var submited = formSubmit.find('button')[0];
// 触发点击事件，会对表单进行验证，验证成功则提交表单，失败则返回错误信息
submited.click();
},
cancel: function (index, layero) {
//取消事件
},
end: function () {
//无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。layer.open关闭事件
}
});
}
},
mounted:function () {
}
});
</script>
</body>
</html>
- add.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../lib/layuiadmin/layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<form class="layui-form demo" action="">
<div class="layui-form-item">
<label class="layui-form-label">单行输入框</label>
<div class="layui-input-block">
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证必填项</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" style="display: none" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
</div>
</div>
</form>
<script src="../../lib/jquery/jquery-2.0.1.min.js"></script>
<script src="../../lib/vue/vue.min.js"></script>
<script src="../../lib/layuiadmin/layui/layui.js"></script>
<script>
layui.use('layer');
var vue = new Vue({
el: '.demo',
data() {
return {}
},
methods: {
save: function () {
// 提交代码
}
},
mounted: function () {
layui.use(['form', 'layedit', 'laydate'], function () {
var form = layui.form
, layer = layui.layer;
//自定义验证规则
form.verify({
title: function (value) {
if (value.length < 5) {
return '标题至少得5个字符啊';
}
}
, pass: [
/^[\S]{6,12}$/
, '密码必须6到12位，且不能出现空格'
]
, content: function (value) {
layedit.sync(editIndex);
}
});
form.on('submit(demo1)', function (data) {
return false;
});
});
}
});
</script>
</body>
</html>
这样就能实现具体的表单验证了。
- 看看效果
