Layui的lay-verify属性需用空格分隔多个验证规则,如“required phone email”;内置规则名不可与自定义规则重名;phone规则严格校验纯11位数字,不兼容格式化字符。
lay-verify 属性里怎么写多个验证规则
直接用空格分隔,不是逗号,也不是竖线。layui 的 lay-verify 是按空格切分规则名的,每个规则独立触发校验函数。
- 正确写法:
lay-verify="required|phone|email"❌ 错误(用了竖线) - 正确写法:
lay-verify="required phone email"✅ 空格分隔 - 如果写了
required|phone,Layui 会尝试找一个叫required|phone的自定义规则,而不是分别执行两个内置规则 - 内置规则顺序不影响结果,但自定义规则若依赖前置校验(比如先判非空再判格式),得靠你自己在函数里控制逻辑
自定义验证规则和内置规则混用时要注意什么
自定义规则名不能和内置规则重名(如 required、phone、url),否则你的函数不会被调用——Layui 优先走内置逻辑。
- 内置规则列表(v2.8+):
required、phone、email、url、number、date、identity、pass - 自定义规则需用
form.verify()注册,且名字不与上述冲突,比如用mobile代替phone,或加前缀myEmail - 注册后,在
lay-verify中仍用空格拼接:lay-verify="required myEmail" - 注意:自定义规则函数返回
false或字符串时才报错,返回undefined或true视为通过
为什么填了手机号还提示“请输入正确的手机号”
大概率是用了 phone 规则但输入值带空格或中文括号,Layui 内置 phone 校验非常严格:只认纯数字、11位、开头是 1,不处理任何格式化字符。
- 用户输入
138 1234 5678→ 失败(含空格) - 用户输入
(138)1234-5678→ 失败(含符号) - 解决方案:要么改用自定义规则预处理(
.replace(/\D/g, '')),要么前端加oninput实时清洗,别指望phone规则自己容错 - 另一个坑:
lay-verify不校验 disabled 或 readonly 元素,确保表单项没被意外设为只读
form.on('submit') 里手动触发验证失败怎么办
如果你在提交回调里调用 form.validate() 或 form.verify(),它不会自动阻止表单提交——Layui 的验证拦截只发生在点击 type="submit" 按钮的默认行为中。
- 想手动控制:用
form.validate(function(data){ ... }),里面return false不会中断流程,得靠你显式return false阻止 submit 回调继续执行 - 更稳妥的做法:去掉按钮的
type="submit",改成type="button",然后在 click 里调用form.validate(),验证通过再发请求 - 注意
form.validate()第二个参数是验证失败时的回调,不是 success 回调;成功时它啥也不返回,你得靠这个回调里的return false来中断后续逻辑
Layui 表单验证的链式行为是“全或无”:只要一个规则失败就停,不继续跑后面的;但规则本身没有执行顺序保障,尤其是自定义规则之间,别假设 A 一定在 B 前执行。











