必须用 required + value="on" 组合实现复选框必选校验，name 前后端一致，后端严格验证字段存在且值为 "on"，协议链接需 target="_blank" rel="noopener noreferrer" 保障安全与可访问性。
怎么让复选框必须勾选才能提交
浏览器原生不支持 required 对复选框做“必须勾选”校验——它只检查是否被设为 checked，而用户没点时，表单提交根本不会把该字段发出去，导致后端收不到值、无法判断用户是否同意。所以光加 required 是无效的。
正确做法是用 required + value="on" 组合，并确保初始状态为未勾选：
<label> <input type="checkbox" name="terms_agreed" value="on" required> 我已阅读并同意《用户协议》 </label>
-
name必须有，且前后端保持一致（别写成agreement或terms） - 不要设
checked属性，否则默认勾选，绕过用户主动确认 - 后端收到的值是字符串
"on"（不是布尔值），需显式判断是否等于"on"
为什么不能用 JavaScript 模拟 checkbox 的 required 行为
有人用 onclick + preventDefault() 拦截提交再手动校验，这会破坏原生表单验证体验：比如失去 :invalid 伪类样式、无法触发浏览器自带的错误提示气泡、移动端键盘可能不自动收起。
更关键的是，这种写法绕过了 HTML5 表单约束验证（Constraint Validation API），导致无障碍工具（如屏幕阅读器）无法识别必填逻辑，合规风险高。
立即学习“前端免费学习笔记（深入）”；
- 原生
required自动关联aria-invalid和错误消息朗读 - 自定义 JS 校验必须手动补全所有 ARIA 属性，极易遗漏
- 部分隐私浏览器（如 Firefox Strict Mode）会屏蔽非标准表单交互
用户协议链接点击后不跳转，怎么安全地打开新页面
协议文本里的链接必须可访问、可追溯，但直接写 <a href="/terms"></a> 会让用户离开当前表单页，可能中断填写流程。最稳妥的方式是用 target="_blank" + rel="noopener noreferrer"：
<a href="/terms" target="_blank" rel="noopener noreferrer">《用户协议》</a>
- 缺
rel="noopener"可能导致新页面通过window.opener控制原页面（安全漏洞） - 缺
noreferrer会在 Referer 头泄露来源路径，影响隐私合规 - 不要用
javascript:void(0)或#占位，那会让链接不可访问、不可索引
后端怎么验证这个 checkbox 真被用户点了
前端传来的 terms_agreed 字段，后端不能只看“是否存在”，因为攻击者可以伪造 POST 请求，手动加上该字段。必须同时验证：字段存在 + 值为预期字符串 + 用户操作上下文合理。
- PHP 示例：
isset($_POST['terms_agreed']) && $_POST['terms_agreed'] === 'on' - Node.js 示例：
req.body.terms_agreed === 'on'（注意用严格相等） - 别用布尔转换：
!!req.body.terms_agreed会把空字符串、"false"都判为 true - 如果用了 CSRF Token，确保校验在协议勾选验证之前完成，否则可能漏防重放
name、href、value 的拼写。 
