自定义验证规则必须通过 form.verify() 注册,且需在 form.render() 前完成;规则名为字符串字面量,回调函数接收 value 和 item,返回 false 或非空字符串表示失败。
自定义验证规则必须用 form.verify 注册
layui 的表单验证不支持在 form.render() 后动态追加规则,所有自定义规则必须在 form.verify() 中一次性声明。漏掉这步,required 或 lay-verify="xxx" 里的自定义名根本不会触发。
常见错误现象:lay-verify="phone" 不报错也不校验,控制台无提示,输入框失去焦点后毫无反应。
- 规则名(如
"phone")必须是字符串字面量,不能是变量 - 回调函数接收两个参数:
value(当前值)、item(DOM 元素),返回false或字符串错误提示才视为失败 - 不要在回调里写
return true—— Layui 只认false或非空字符串为失败
form.verify({
phone: function(value, item) {
if (!/^1[3-9]\d{9}$/.test(value)) {
return '手机号格式不正确';
}
},
password: function(value) {
if (value.length
<h3>
<code>lay-verify</code> 多规则用空格分隔,顺序影响执行逻辑</h3>
<p>多个验证规则写在同一个 <code>lay-verify</code> 属性里时,Layui 按从左到右顺序逐个执行。一旦某条规则返回错误,后续规则不再执行 —— 这意味着要把轻量、快判的规则放前面(比如非空),把正则或异步校验放后面。</p>
<p>使用场景:一个输入框既要必填,又要符合邮箱格式,还要防重复注册(需 AJAX 校验)。</p>
- 错误写法:
lay-verify="email required remote"→ 邮箱格式不通过时,required根本没机会触发(因为email已失败) - 正确写法:
lay-verify="required email remote" - 注意:
remote是内置规则,但它的实现依赖form.on('verify(...),不是开箱即用的,需自己补全 AJAX 逻辑
异步验证(如用户名是否已存在)必须手动调用 form.validate()
Layui 默认的 blur / submit 触发验证不支持 await 或回调式异步规则。想做「失焦时查重」,不能直接在 form.verify 回调里发 AJAX —— 那样会阻塞 UI,且返回值无效。
正确做法是绕过内置验证链,用事件监听 + 手动校验:
- 给输入框加
id="username",监听blur - 在回调里发请求,成功后调用
form.validate("username")强制触发该字段验证(前提是它已有lay-verify规则) - 或者更直接:用
form.validate()全局校验,但在form.on('submit')里拦截,先查重再决定是否放行
form.on('submit', function(data){
// 先异步查重
$.get('/api/check?user=' + data.field.username, function(res){
if(res.code === 0) {
layer.msg('用户名已存在');
return false; // 阻止提交
}
// 查重通过,才真正提交
$.post('/api/register', data.field);
});
return false; // 先阻止默认提交
});
自定义规则里别直接操作 DOM 或弹窗
验证规则函数只负责「判断 + 返回提示」,Layui 内部会统一处理样式、提示层和焦点定位。如果在里面手动 layer.msg() 或 $(item).addClass(),会导致提示重复、样式冲突、甚至验证状态错乱。
性能影响:自定义规则会被高频调用(比如每次输入、每次失焦),任何 DOM 查询或动画都会拖慢响应。
- 错误示例:
$(item).next('.error').text('错了').show(); return false; - 正确做法:只返回字符串,让 Layui 自己渲染提示
- 兼容性注意:Layui 2.8+ 对
form.verify回调的 this 指向做了调整,旧项目升级后若出现this.xxx is undefined,说明你误用了 this,应改用参数item











