必须用submit事件监听+checkvalidity配合setcustomvalidity实现多选框数量限制，因required对checkbox无效；需统一name属性，统计:checked数量，不满足条件时调用setcustomvalidity并preventdefault，且每次校验前须清空旧错误。
如何用 checkValidity() 配合自定义验证实现多选框数量限制
原生 required 对 <input type="checkbox"> 无效——它只校验“是否被勾选”，无法控制“至少/至多勾选几个”。必须手动拦截提交并调用 setCustomValidity()。
关键思路：监听表单的 submit 事件，统计已勾选的 checkbox 数量，不满足条件时调用 element.setCustomValidity("提示文字") 并返回 false 阻止提交。
- 所有同名
checkbox必须有相同的name属性（如name="hobby"），才能用document.querySelectorAll('input[name="hobby"]:checked')准确获取 - 不要在每个
checkbox上单独设required，否则会变成“至少勾一个”，且无法控制上限 - 校验逻辑应放在
form.addEventListener('submit', ...)中，而非click或change，避免干扰用户操作节奏
限制“至少选 2 个”和“最多选 4 个”的完整示例
以下代码同时支持最小值和最大值校验，错误信息会显示在浏览器默认验证气泡中：
<script> const form = document.getElementById('myForm'); const checkboxes = form.querySelectorAll('input[name="skill"]'); form.addEventListener('submit', (e) => { const checkedCount = checkboxes.length && [...checkboxes].filter(cb => cb.checked).length; // 清除之前可能残留的自定义错误 checkboxes.forEach(cb => cb.setCustomValidity('')); if (checkedCount < 2) { checkboxes[0].setCustomValidity('请至少选择 2 项技能'); e.preventDefault(); } else if (checkedCount > 4) { checkboxes[0].setCustomValidity('最多只能选择 4 项技能'); e.preventDefault(); } }); </script>注意：setCustomValidity 必须设在某个具体 checkbox 元素上（这里选第一个），否则浏览器不知道在哪显示错误；且每次校验前要先清空，否则旧错误会持续生效。
为什么不用 change 实时校验？
实时校验（比如每个勾选后立刻检查）容易引发误报和体验断裂：用户刚取消一个选项，还没来得及再选，就弹出“不足 2 个”的提示，干扰操作流。
-
submit校验是用户明确表达“我要提交了”的信号，时机更合理 - 若需辅助提示（如实时计数），可用纯 UI 方式（如旁边显示
已选 <span id="count">0</span>/2~4），但不触发setCustomValidity - 移动端尤其要注意：频繁触发
change可能导致键盘闪退或焦点丢失
兼容性与隐藏坑
setCustomValidity() 在 IE10+、Chrome 4+、Firefox 4+ 均支持，但 Safari 对多选框的错误定位支持较弱——错误气泡可能出现在表单顶部而非对应 checkbox 旁。
- 如果使用了
formnovalidate属性的按钮（如“暂存草稿”），需额外判断e.submitter?.formNoValidate !== true，避免绕过校验 - 动态增删 checkbox 时，务必重新获取
querySelectorAll结果，不能复用旧的 NodeList - Vue/React 等框架中，不要直接操作 DOM 的
setCustomValidity，应封装为指令或自定义 Hook，否则可能被框架 patch 覆盖
最常被忽略的是：没清空 setCustomValidity。一旦设过非空字符串，该元素就始终处于“无效”状态，直到显式设为空字符串，否则后续任何提交都会失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
