在表单提交前检查字段多选操作状态，最直接的方法是在表单的 submit 事件中调用 event.preventdefault() 来拦截默认提交行为，并通过遍历 htmlcollection 或数组来判断选中项。具体做法是获取所有相关复选框元素，检查其 checked 属性，若未满足条件则给出提示并阻止提交；若满足条件，可手动调用 form.submit() 继续流程。此方法适用于需要即时反馈且无需刷新页面的场景。
submit 事件如何拦截并验证单选组状态
通过监听 submit 事件可以拦截表单提交，利用 querySelectorAll 获取单选按钮组，检查是否有选项被选中。如果没有任何选项被选中，则阻止提交并提示用户。以下是一个完整的示例程序，展示了如何在提交前验证单选组的状态。
<meta charset="UTF-8"><title>Form Validation</title>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
const radios = document.querySelectorAll('input[name="choice"]');
let isChecked = false;
for (const radio of radios) {
if (radio.checked) {
isChecked = true;
break;
}
}
if (!isChecked) {
event.preventDefault();
alert('Please select an option before submitting.');
} else {
console.log('Form is valid, proceeding with submission.');
}
});
</script>预期结果：当用户点击提交按钮但未选择任何单选按钮时，浏览器会弹出警告框 "Please select an option before submitting."，并且表单不会提交。如果用户选择了其中一个选项，控制台将输出 "Form is valid, proceeding with submission."，表单正常提交。
如何处理多个复选框组的选中状态验证
对于多个复选框组，可以在 submit 事件中分别获取每个组的元素集合，并逐一检查它们的选中状态。例如，可以要求至少选择一个来自第一组和一个来自第二组的选项。以下代码演示了如何验证两个独立的复选框组。
<meta charset="UTF-8"><title>Multi Checkbox Validation</title>
<script>
document.getElementById('multiForm').addEventListener('submit', function(event) {
const group1 = document.querySelectorAll('input[name="group1"]');
const group2 = document.querySelectorAll('input[name="group2"]');
let group1Checked = false;
let group2Checked = false;
for (const cb of group1) {
if (cb.checked) {
group1Checked = true;
break;
}
}
for (const cb of group2) {
if (cb.checked) {
group2Checked = true;
break;
}
}
if (!group1Checked || !group2Checked) {
event.preventDefault();
alert('Please select at least one option from each group.');
} else {
console.log('Both groups have selections, proceeding with submission.');
}
});
</script>预期结果：如果用户未在任一复选框组中选择任何选项，浏览器会弹出警告 "Please select at least one option from each group."，表单不会提交。如果用户在两个组中都至少选择了一个选项，控制台将输出 "Both groups have selections, proceeding with submission."，表单正常提交。
当使用 FormData 对象时如何获取选中值
在提交表单后，通常需要使用 FormData 对象来获取表单数据。如果需要在客户端预先获取选中值以便进行更复杂的逻辑处理（如动态生成请求体），可以通过遍历选中的复选框或单选按钮来构建数据。以下代码展示了如何在 submit 事件中使用 FormData 获取选中值，并在控制台中打印出来。
<meta charset="UTF-8"><title>FormData Extraction</title>
<script>
document.getElementById('formDataForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent default submission for demonstration
const formData = new FormData(this);
const interests = [];
for (const [key, value] of formData.entries()) {
if (key === 'interests') {
interests.push(value);
}
}
console.log('Username:', formData.get('username'));
console.log('Selected Interests:', interests);
});
</script>预期结果：当用户输入用户名并勾选兴趣复选框后点击提交，控制台将打印出用户名和所选的兴趣列表。例如，如果用户输入 "JohnDoe" 并勾选 "Coding" 和 "Design"，控制台输出为 "Username: JohnDoe" 和 "Selected Interests: ['coding', 'design']"。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
