lay-verify="required" 必须写在 select 标签上,且需配合空 value 的默认选项;动态修改 option 后必须调用 form.render('select') 同步校验状态,否则必填校验不生效。

lay-verify="required" 必须写在 select 标签上,不是 option 或 label
很多人把 lay-verify="required" 加在 label 上,或者只给第一个 option 加 selected,结果提交时完全不校验。Layui 只认 select 元素自身的 lay-verify 属性,且必须配合非空的 value 才能触发「必填」逻辑。
-
select的默认空选项(如<option value="">请选择</option>)必须存在,且value为空字符串 —— Layui 会把它当作“未选择”来判断 - 如果所有
option都有非空value,又没设selected,提交时会直接报错“未填写”,哪怕 DOM 里只有一个option - 不要用原生
required属性替代lay-verify="required",Layui 完全忽略它
下拉框初始值为“请选择”时,form.val() 不能绕过空值校验
编辑页回显场景下,有人调用 form.val('filterName', { 'status': '0' }) 设置默认选中,却发现提交仍提示“未填写”。问题不在赋值,而在 UI 渲染没同步 —— Layui 的 select 是重绘组件,form.val() 只改了原始 select.value,但视觉上没高亮对应项,导致校验时读到的是空字符串。
- 必须紧接
form.val()后调用form.render('select'),否则校验逻辑拿到的仍是旧状态 - 如果
select带lay-filter,推荐传第二个参数:form.render('select', 'yourFilter'),避免重绘整个表单影响 radio 等其他组件 - 后端返回
value="0"时,Layui 默认跳过匹配(因它把"0"当作 falsy),得手动加selected属性再 render:$('select[name="status"] option[value="0"]').prop('selected', true)
多级联动下拉框,子级必填验证容易失效
比如“省→市→区”三级联动,用户选了省但没选市,提交时却没报错。这是因为子级 select 在初始化时是空的,lay-verify="required" 被挂载了,但 Layui 不会在 DOM 插入新 option 后自动重新绑定校验规则。
- 每次通过 AJAX 更新子级
select的innerHTML或append()后,必须立刻调用form.render('select') - 不要依赖
change事件后延时调用 render —— 用户可能快速点击提交,render 还没执行完 - 如果子级
select初始display: none,Layui 会跳过渲染,得先 show 再 render,或改用visibility: hidden
自定义错误文案别硬写在 lay-reqtext 里
每个 select 都加 lay-reqtext="请选择省份" 看似可行,但中英文切换、运营临时改词时要满屏搜替换,极易漏掉某个 select。
- 统一用
form.verify()注册required规则,返回字符串即可覆盖所有lay-verify="required"的select和input - 示例:
required: function(value, item) { return value ? true : '此项必选'; } - 注意:一旦注册了
required自定义规则,所有lay-reqtext都会被忽略 —— 这是设计行为,不是 bug
select 标签本身,以及任何动态变更后都得显式 form.render('select') 同步状态。


















