layui radio 必填校验需在同name下首个input加required且不加lay-ignore;动态渲染须调用form.render('radio');自定义校验应通过document.querySelector(':checked')判断,而非依赖value参数。

layui 表单中 radio 必填校验不生效?先确认是否加了 required
layui 的表单校验依赖原生 HTML5 的 required 属性,但 radio 是一组同名元素,只对第一个加 required 才有效——这是最容易被忽略的点。如果所有 input[type="radio"] 都没加 required,或者加在了非第一个上,提交时完全不会触发校验。
正确写法是:同 name 下任意一个(通常第一个)input 标签必须带 required,且不能用 lay-ignore 干扰校验流程。
<input type="radio" name="gender" value="1" title="男" required>- 同 name 的其他 radio 不需要、也不该再加
required - 如果用了
lay-filter但没初始化 form 模块,校验压根不启动
form.verify() 自定义校验函数怎么判断 radio 是否选中
当原生 required 不够用(比如要结合其他字段联动判断),就得手动写 form.verify()。关键在于:layui 提供的 value 参数是空字符串 "",不是 undefined 或 null,所以不能用 !value 简单判断。
更稳妥的方式是用 document.querySelector 查找已选中的项:
form.verify({
gender: function(value) {
const checked = document.querySelector('input[name="gender"]:checked');
if (!checked) return '请选择性别';
}
});
-
value在 radio 场景下始终是空字符串,不可靠 - 务必用
:checked伪类,而不是遍历所有name="gender" - 如果 radio 被
lay-ignore包裹,querySelector仍能取到,但 layui 默认校验会跳过它
layui 2.8+ 中使用 form.on('submit(...)') 时校验失败却没提示?
常见原因是未调用 form.render() 或未正确绑定 filter。radio 是动态渲染内容时最容易漏掉的环节:即使 HTML 里写了 required,如果是在 JS 动态插入的 DOM,必须显式调用 form.render('radio'),否则 layui 不识别这组控件。
- 动态生成 radio 后,立即执行
form.render('radio', 'your-filter') -
form.on('submit(...)')的 filter 名必须和lay-filter="xxx"完全一致 - 若页面有多个 form,确保
form.verify()在对应form.on之前注册
移动端点击 radio 无响应,导致必填校验永远失败
某些安卓 WebView 或 iOS 低版本 Safari 下,label 包裹 radio 时点击区域失效,用户看似点了但实际没触发 checked 状态变更——结果提交时校验报错,用户却不知道自己根本没选上。
解决办法是避免依赖 label 的默认行为,改用显式事件绑定:
document.querySelectorAll('input[name="status"]').forEach(el => {
el.addEventListener('change', function() {
// 可选:手动触发表单状态更新
form.val('your-form-filter', { status: this.value });
});
});
- 不要只靠
<label><input type="radio">文字</label>这种写法 - 优先用
for/id显式关联,或给label加onclick="this.querySelector('input').click()" - 真机测试时务必验证点击反馈,模拟器常掩盖这个问题
form.val() 可能读不到最新值,form.render() 又没及时调用。这时候手动 document.querySelector(...):checked 反而是最稳的兜底方式。


















