layui select 触发 form.verify 不生效,首要确认是否设置 name 属性;name 值须与 form.verify 注册的规则 key 一致,且需在 layui.use('form') 内注册规则并调用 form.render()。

layui select 触发 form.verify 不生效?先确认是否绑定了 name 属性
layui 的表单校验(form.verify)只对带 name 属性的元素生效,select 也不例外。没加 name,哪怕写了 lay-verify,调用 form.validate() 或 form.verify() 都不会检查它。
-
<select></select>标签必须有name="xxx",且值需与form.verify()中注册的规则 key 匹配(如name="city"对应form.verify({ city: ... })) - 如果用了
lay-search,仍需保留name;仅加lay-verify="required"不足以触发自定义验证函数 - 动态插入的 select(比如 Ajax 加载后 append 进去),要确保在
form.render('select')之后再绑定验证规则
手动触发 select 校验:用 form.validate() + 回调判断
layui 没提供单独校验某个 select 的 API,只能走整表单校验流程,但可以通过回调精准定位结果。
- 调用
form.validate()时传入回调函数,它会在所有字段校验完成后执行,参数是(verify, elem),其中elem是第一个未通过校验的 DOM 元素 - 如果只想“触发校验并知道 select 是否通过”,不依赖弹窗提示,就别用
form.on('submit'),直接调用form.validate(function(verify, elem){...}) - 注意:
form.validate()会校验全部带lay-verify或匹配form.verify规则的字段,不是只校验 select —— 想隔离校验,得临时移除其他字段的lay-verify属性再恢复
form.validate(function(verify, elem){
if (elem && elem.name === 'area') {
console.log('area 下拉框校验失败');
}
});
select 值变更后立即校验:监听 change 事件 + 手动提取值
layui 的 select 渲染后原生 change 事件失效,必须监听 form.on('select(xxx)'),否则改完选项根本收不到通知。
- 在
form.on('select(xxx)')回调里调用form.validate()效果不好——它会校验全表单,且无法区分是哪个字段触发的 - 更稳的做法:用
$(elem).val()拿当前值,手动比对规则(比如非空、是否在白名单内),再设置layui.form().msg显示错误或清除提示 - 若依赖
form.verify里的正则或函数,可把规则逻辑抽成独立函数,避免重复写校验逻辑
常见报错:form is not defined 或 form.verify is not a function
这两个错误基本都因为 layui 模块没正确加载或加载顺序错乱。
-
form不是全局变量,必须显式layui.use('form', function(form){...}),不能直接写form.verify(...) - 如果页面多个地方用到 form,但只在某处
layui.use,其他地方会报form is not defined—— 每个需要 form 的 script 块都得自己use -
form.verify必须在layui.use('form', ...)回调内部执行,且要在form.render()之前注册,否则规则不生效











