在表单提交前检查协议勾选，最直接的做法是监听表单的 submit 事件，并在回调函数中通过 event.preventdefault() 阻止默认提交行为。你需要获取协议复选框元素的 checked 属性，如果为 false，则提示用户并中断流程；只有当属性为 true 时，才允许表单继续提交。
如何拦截 submit 事件并验证 checked 状态
要拦截提交，必须给 绑定 onsubmit 或 addEventListener('submit')。在事件处理函数中，核心逻辑是读取协议复选框（通常是一个 ）的 checked 布尔值。如果该值为假，调用 event.preventDefault() 即可取消提交，浏览器不会向服务器发送请求。
// HTML 结构示例： //const form = document.getElementById('myForm'); const agreeCheckbox = document.getElementById('agree'); form.addEventListener('submit', function(event) { // 1. 检查协议是否勾选 if (!agreeCheckbox.checked) { // 2. 阻止表单默认提交行为 event.preventDefault(); alert('请先勾选同意协议！'); return; } // 3. 如果已勾选，代码执行到这里，表单将正常提交 console.log('协议已同意，开始提交...'); });
运行上述代码，当用户未勾选复选框并点击提交按钮时，页面会弹出警告框，且网络面板中不会有 POST 请求发出。勾选后再次点击，表单将按 action 属性指定的地址进行提交。
结合 HTML5 原生验证与自定义逻辑
虽然 HTML5 的 required 属性可以自动阻止未勾选的复选框提交，但有时我们需要更复杂的逻辑，比如动态启用/禁用提交按钮，或者在提交前进行额外的数据校验。此时，我们可以在 submit 事件中同时检查多个条件。
function validateAndSubmit(event) {
const agreeCheckbox = document.getElementById('agree');
const usernameInput = document.getElementById('username');
// 检查协议
if (!agreeCheckbox.checked) {
event.preventDefault();
alert('请同意协议');
return false;
}
// 检查用户名是否为空（HTML5 required 也会做这个，但这里演示 JS 逻辑）
if (usernameInput.value.trim() === '') {
event.preventDefault();
alert('用户名不能为空');
return false;
}
// 所有检查通过，允许提交
return true;
}
const form = document.getElementById('myForm');
form.addEventListener('submit', validateAndSubmit);
在这个例子中，validateAndSubmit 函数同时处理了协议和用户名两个条件的检查。如果任一条件不满足，event.preventDefault() 都会被调用，从而阻止表单提交。这种模式适用于需要集中管理复杂验证逻辑的场景。
当协议复选框被禁用时提交行为如何变化
如果在程序中动态禁用了协议复选框（例如设置 disabled 属性），其 checked 状态将不再参与表单提交的数据序列，且 submit 事件中的 checked 属性读取可能受到限制或始终为 false。此时，即使视觉上看起来“选中”，实际提交时也不会携带该字段，导致后端无法验证协议同意状态。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
