必须通过form.verify()注册且在form.render()前完成,规则名为字符串,回调接收value和item,返回false或非空字符串表示失败。
如何在 layui.form 中添加自定义验证规则
直接用 form.verify() 注册规则,不改源码、不重写校验逻辑就能生效。它本质是往全局验证规则池里塞函数,表单提交或失去焦点时自动触发。
常见错误是把规则写在 form.render() 之后,或者没给规则起名(导致后续无法复用或覆盖)。
- 规则名必须是字符串,且不能和内置规则(如
required、email)同名,否则会被覆盖 - 验证函数接收两个参数:
value(当前输入值)和item(DOM 元素),返回false或字符串提示语表示失败 - 多个规则可共存,用空格分隔,例如:
lay-verify="required phone customId"
手机号、身份证等常用自定义规则怎么写
别硬背正则,先明确校验目标:比如手机号要区分大陆 11 位、带号段有效性;身份证要校验长度、校验码、出生年月合理性。layui 不做深度校验,得自己补。
示例:带号段的手机号验证(排除 170/171 等虚拟运营商)
form.verify({
phone: function(value, item){
if(!/^1[3-9]\d{9}$/.test(value)){
return '请输入正确的手机号';
}
// 可选:进一步排除特定号段
if(/^1(70|71|72|73|74|77|78|79)\d{8}$/.test(value)){
return '暂不支持该号段';
}
}
});
身份证验证建议用现成库(如 idcard-validation),自己实现容易漏掉末位校验码算法或闰年判断。
为什么自定义规则不触发?常见排查点
不是代码写错了,大概率是 DOM 或配置没对上。
-
lay-verify属性必须写在<input>或<select>上,写在<div class="layui-form-item">里无效 - 确保
form.verify()在layui.use(['form'], ...)回调内执行,否则form对象未就绪 - 如果用了
form.render()重渲染表单(比如动态插入 input),需在 render 后再调用form.verify()注册,或提前注册好再 render - 注意表单元素是否被禁用(
disabled)或设置了readonly—— layui 默认跳过这两类元素的验证
如何让自定义规则支持动态参数(比如“确认密码”校验)
layui 原生不支持传参,但可以用闭包或 DOM data 属性绕过。
比如“确认密码”需比对另一个 input 的值,推荐方案:
form.verify({
repass: function(value, item){
var passElem = document.querySelector('[name="password"]');
if(value !== passElem.value){
return '两次输入的密码不一致';
}
}
});
更健壮的做法是把目标字段 name 写进 lay-verify 属性里,比如 lay-verify="repass=password",然后在验证函数里解析:
form.verify({
repass: function(value, item){
var targetName = item.getAttribute('lay-verify').split('=')[1];
var targetElem = document.querySelector('[name="' + targetName + '"]');
if(!targetElem || value !== targetElem.value){
return '请确认输入一致';
}
}
});
这种写法灵活,但要注意 XSS 风险 —— 如果 targetName 来自不可信来源,需 sanitize。


















