在表单提交前检查字段多选操作状态，最直接的方法是在表单的 submit 事件中调用 event.preventdefault() 来拦截默认提交行为，并通过遍历 htmlcollection 或数组来判断选中项。具体做法是获取所有相关复选框元素，检查其 checked 属性，若未满足条件则给出提示并阻止提交；若满足条件，可手动调用 form.submit() 继续流程。此方法适用于需要即时反馈且无需刷新页面的场景。
submit 事件如何拦截并验证单选组状态
通过监听 submit 事件可以拦截表单提交，利用 querySelectorAll 获取单选按钮组，检查是否有选项被选中。如果没有任何选项被选中，则阻止提交并提示用户。以下是一个完整的示例程序，展示了如何在提交前验证单选组的状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Validation</title>
</head>
<body>
<form id="myForm" action="/submit" method="POST">
<fieldset>
<legend>Select an option:</legend>
<label><input type="radio" name="choice" value="A"> Option A</label>
<label><input type="radio" name="choice" value="B"> Option B</label>
<label><input type="radio" name="choice" value="C"> Option C</label>
</fieldset>
<button type="submit">Submit</button>
</form>
<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>
</body>
</html>预期结果：当用户点击提交按钮但未选择任何单选按钮时，浏览器会弹出警告框 "Please select an option before submitting."，并且表单不会提交。如果用户选择了其中一个选项，控制台将输出 "Form is valid, proceeding with submission."，表单正常提交。
立即学习“Java免费学习笔记（深入）”；
如何处理多个复选框组的选中状态验证
对于多个复选框组，可以在 submit 事件中分别获取每个组的元素集合，并逐一检查它们的选中状态。例如，可以要求至少选择一个来自第一组和一个来自第二组的选项。以下代码演示了如何验证两个独立的复选框组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multi Checkbox Validation</title>
</head>
<body>
<form id="multiForm" action="/submit" method="POST">
<fieldset>
<legend>Group 1:</legend>
<label><input type="checkbox" name="group1" value="X"> X</label>
<label><input type="checkbox" name="group1" value="Y"> Y</label>
</fieldset>
<fieldset>
<legend>Group 2:</legend>
<label><input type="checkbox" name="group2" value="1"> 1</label>
<label><input type="checkbox" name="group2" value="2"> 2</label>
</fieldset>
<button type="submit">Submit</button>
</form>
<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>
</body>
</html>预期结果：如果用户未在任一复选框组中选择任何选项，浏览器会弹出警告 "Please select at least one option from each group."，表单不会提交。如果用户在两个组中都至少选择了一个选项，控制台将输出 "Both groups have selections, proceeding with submission."，表单正常提交。
当使用 FormData 对象时如何获取选中值
在提交表单后，通常需要使用 FormData 对象来获取表单数据。如果需要在客户端预先获取选中值以便进行更复杂的逻辑处理（如动态生成请求体），可以通过遍历选中的复选框或单选按钮来构建数据。以下代码展示了如何在 submit 事件中使用 FormData 获取选中值，并在控制台中打印出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FormData Extraction</title>
</head>
<body>
<form id="formDataForm" action="/submit" method="POST">
<input type="text" name="username" placeholder="Username">
<input type="checkbox" name="interests" value="coding"> Coding
<input type="checkbox" name="interests" value="design"> Design
<button type="submit">Submit</button>
</form>
<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>
</body>
</html>预期结果：当用户输入用户名并勾选兴趣复选框后点击提交，控制台将打印出用户名和所选的兴趣列表。例如，如果用户输入 "JohnDoe" 并勾选 "Coding" 和 "Design"，控制台输出为 "Username: JohnDoe" 和 "Selected Interests: ['coding', 'design']"。
