Layui校验规则

Layui校验规则

1. 弹框中的规则验证书写:

如果想要使用弹窗层自带的确认取消按钮,去提交form表单内容,需利用layui form表单属性lay-submit，进行如下步骤:

1. 在每一个form表单中标签之前, 添加一个隐藏的按钮，type="button"这个type属性必须书写，否则会默认按照layui form表单进行submit提交，

	<button type="button" class="authorityAddOrUpdateBtn" lay-submit style="display: none;"></button>

class 属性值全局唯一, 包含 lay-submit display:none

2. 在弹框页面

layer.open({
	yes: function (index, div) {
    	var form = layui.form;
   		var submited = $(".authorityAddOrUpdateBtn");   // 找到刚才的按钮
    	submited.click();   // 触发隐藏按钮的点击事件
    	var form = layui.form;
        form.on("submit(addOrUpdate)",function(data) {
            // addOrUpdate();  // 验证通过，进行你想要做的什么事情，方法的书写
        })
	}
}

3. 自定义验证可以在全局js文件里写

// 表单验证
layui.use('form', function () {
	var form = layui.form;
  	form.render();
  	// 开始表单自定义验证
  	form.verify({
    	// 必填项
    	title: function(value){ //value：表单的值、item：表单的DOM对象
    		if(value == ""){
        		return '必填项不能为空哈哈!';
        	}
    	}
 	});
});

弹出层校验时注意：

有时候会发生：当第一次进入弹窗时，填写完必填项，点击提交，会没有效果，再次点击，才提交数据，解决方案：

// 1.给自定义button 添加属性 disabled 
<button type="button" disabled class="noticeAddOrUpdateBtna" lay-submit lay-filter="sysNoticeAddOrUpdate" style="display: none;">124</button>
// 2. 当弹出层加载时，默认点击一下弹出层自带的确定按钮，然后去掉button的disabled属性，就可以了。
$(document).ready(function () {
	$(".layui-layer-btn0").click();
	$(".noticeAddOrUpdateBtna").removeAttr("disabled");
});

2. 自定义按钮校验规则添写
有时候我们在验证表单时，会发现，验证的同时还会继续往下走方法或者发请求，这时候就得注意form.on(“submit(filter)”,function(){})的使用了。

需要在自己写的button中，添加属性： lay-submit="" ，属性： lay-filter="save"，然后在button事件中form.on，监听这个提交事件。

// 第一步  在input框中添加属性 lay-verify="required"
<input type="text" lay-verify="required" >

// 第二步  在自己的button中添加事件和两个属性 
<button type="button" lay-submit="" lay-filter="save" onclick="reportSave">保存</button>

// 第三步  处理button事件，同时监听规则验证，验证成功之后做其他处理
function reportSave() {
    var form = layui.form;
    form.on("submit(save)",function(data) {
       // 在这里写需要做的事情
    })
}