多选框 lay-verify="required" 无效,因 required 仅适用于单值控件;须用自定义校验函数检查同名 checkbox 组是否至少选中一项,并注意动态渲染、name 转义及避免 console/alert 干扰。
多选框 lay-verify="required" 为什么没效果
因为 required 是为单值控件(如 input、radio)设计的,对同名 checkbox 不生效——layui 提交时只取第一个被勾选的值,其余被忽略,导致校验逻辑压根不触发。
现象是:一个都不选,表单照样提交成功;或者只勾一个,required 就“认为”已满足。
- 必须用自定义验证函数,不能依赖内置
required - 校验目标不是单个 checkbox 元素,而是整个同名 checkbox 组的选中状态
- HTML 中每个
input[type="checkbox"]都要带相同name,但lay-verify属性只需写在任意一个上(推荐写第一个),避免重复注册
怎么写自定义函数校验至少选中一项
在 form.verify() 中定义函数,通过 name 查找所有同名 checkbox,再遍历判断是否至少有一个被勾选。
关键点:
- 函数参数
value是当前被校验元素的value值(对 checkbox 没意义),真正要用的是item(DOM 元素)来反推组 - 用
$(item).attr('name')获取 name,再用formElem.find('input[name="' + name + '"]:checked')找已勾选项 - 返回
true表示通过,返回字符串(如"请至少选择一项")表示失败并提示
示例代码:
form.verify({
checkboxReq: function(value, item) {
var name = $(item).attr('name');
var $form = $(item).closest('.layui-form');
var checkedLen = $form.find('input[name="' + name + '"]:checked').length;
if (checkedLen === 0) {
return '请至少选择一项';
}
}
});
多个 checkbox 组共用同一套校验规则,但提示文案不同
不能靠函数名区分文案,得从 DOM 上提取上下文信息,比如用 data-tip 或 title 属性传提示语。
- 在 HTML 的任意一个 checkbox 上加
data-tip="请选择爱好" - 函数内用
$(item).data('tip') || '请至少选择一项'动态取提示 - 避免硬编码文案,方便多处复用同一函数名
- 注意:不要用
title,因为 Layui 会自动把它转成 tooltip,干扰校验提示
校验函数写了但不触发?检查这三件事
常见静默失效原因:
- 没调用
form.render()—— 如果 checkbox 是动态插入的,或 form 初始化后才注册验证,必须手动渲染 -
lay-verify写在了非.layui-form容器内 —— Layui 只校验属于某个.layui-form的元素 - 同名 checkbox 的
name值含特殊字符(如方括号[]),没做转义 —— jQuery 选择器会报错,改用$form.find("[name='" + name + "']:checked")
最易被忽略的是:校验函数里直接用了 console.log 或 alert,会导致 Layui 认为校验流程异常中断,后续逻辑跳过。函数里只做判断、返回布尔或字符串即可。


















