原生 required 校验复选框需同时设置 name 和 value，否则无效；自定义提示须用 setcustomvalidity() + reportvalidity() 并清空旧错误；自动勾选后必须手动触发 change 事件；ios 旧版 safari 建议弃用 required 改用 js 全程控制。
用户没勾选时阻止表单提交
浏览器原生支持 required 属性校验复选框，但必须配合 name 和明确的值（比如 value="agree"），否则校验无效。只加 required 不写 name，Chrome 和 Firefox 都会静默忽略。
常见错误写法：<input type="checkbox" required> —— 没有 name，表单照样能提交。
-
name必须存在且非空，例如name="terms" - 建议显式设置
value="agree"，避免后端收到空字符串或 undefined - 不要用
checked默认勾选再靠 JS 反向控制，这会让校验逻辑变复杂且不可靠
自定义错误提示文案
原生 required 校验失败时，浏览器会弹出默认提示（如“请勾选此字段”），但无法直接修改。想换提示，得用 setCustomValidity() + reportValidity() 组合。
关键点：必须在 submit 事件里手动触发校验，并清除旧的自定义错误，否则第二次提交可能沿用上次的错误状态。
- 监听
form.addEventListener('submit', e => { ... }) - 获取复选框元素：
const cb = form.querySelector('[name="terms"]') - 先调
cb.setCustomValidity('')清空历史错误 - 再根据状态设新错误：
if (!cb.checked) cb.setCustomValidity('请阅读并同意服务协议') - 最后调
cb.reportValidity()触发显示
form.addEventListener('submit', e => {
const cb = form.querySelector('[name="terms"]');
cb.setCustomValidity('');
if (!cb.checked) {
cb.setCustomValidity('请阅读并同意服务协议');
}
cb.reportValidity();
if (!cb.checkValidity()) e.preventDefault();
});
服务协议链接点击后自动勾选复选框
这是常见交互需求，但要注意：不能直接 cb.checked = true 就完事。因为原生校验只响应用户操作（click/tap），JS 赋值不会触发 change 事件，导致后续校验状态不同步。
- 必须手动触发
change事件：cb.dispatchEvent(new Event('change', { bubbles: true })) - 链接需加
href="#"并e.preventDefault()，否则页面跳到顶部 - 如果协议是模态框，关闭后也建议同步更新复选框状态并触发
change
移动端 Safari 的 checkbox 校验兼容问题
iOS 15.4 之前版本存在 bug：带 required 的复选框在某些情况下不触发校验，尤其当它被包裹在 <label></label> 里且 label 内容含 <a></a> 或其他交互元素时。
稳妥做法是绕过原生 required，全程用 JS 控制：
- 移除
required属性 - 在 submit 事件里用
if (!cb.checked)判断 - 用
cb.setCustomValidity()+reportValidity()显示错误 - 避免依赖
checkValidity()的返回值做分支逻辑，优先用cb.checked布尔判断
这个逻辑在所有现代浏览器中行为一致，比原生 required 更可控。
最易被忽略的是 change 事件的手动触发和 setCustomValidity('') 的清空时机 —— 少一步，错误提示就卡住不消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
