动态设置必填项需监听radio/checkbox变化后修改lay-verify属性并调用form.render('input')重渲染,新增元素须含name和lay-verify且插入后立即render,自定义验证提示应通过form.verify统一注册。
动态设置必填项不能靠改 required 属性或直接写死 lay-verify="required" —— Layui 初始化后就固化了验证规则,后续 DOM 属性变更不会自动生效。
这是最常见场景:比如「是否启用」开关控制下游字段是否必填。核心不是改值,而是改完后触发重渲染。
form.on('radio(name)', callback) 或 form.on('checkbox', callback) 监听变化<input> 必须有 name 属性(Layui 验证只认 name,不看 id)$elem.attr('lay-verify', 'required|number') 增加规则,或 $elem.removeAttr('lay-verify') 移除form.render('input') —— 写成 form.render() 会重载全部组件,可能重置 radio 选中状态type="hidden"),Layui 默认跳过校验,得改成 type="text" 并用 style="display:none"
用 JS 拼 HTML 插入后,Layui 不会自动识别新元素的 lay-verify,必须手动补 render。
name 和 lay-verify="required"(例如:<input name="desc[]" lay-verify="required">)form.render('input'),否则提交时不校验select 或 checkbox,对应要 render 'select' 或 'checkbox'
form.render(),批量插入后再统一 render 一次更稳逐个写 lay-reqtext 维护成本高,且不支持运行时动态切换文案。注册全局 rule 更灵活。
layui.use(['form'], ...) 里调用 form.verify({ required: function(value, item) { return value ? true : '此处必须填写'; } })
required 规则,所有 lay-verify="required" 的字段都走这个函数,lay-reqtext 被忽略item.name 或 item.getAttribute('data-context') 做差异化提示真正容易被忽略的是:所有动态操作都依赖 form.render() 的时机和粒度 —— 渲染太早(DOM 还没插入),或太晚(用户已点击提交),或类型错(该 render 'input' 却写了 'select'),都会让验证失效。