在表单提交前检查字段回复状态，最直接的做法是监听 submit 事件并调用 event.preventdefault()。通过遍历表单中的 input 元素，检查其 value 是否为空或符合特定格式，若发现无效数据则阻止提交并提示用户。
如何拦截默认提交行为并验证输入
要拦截默认的表单提交行为，需要给表单绑定 submit 事件监听器。在回调函数中，首先获取所有需要检查的输入字段，然后逐个判断其值是否符合要求。如果所有字段都有效，允许表单继续提交；否则，调用 preventDefault() 停止提交过程。
<form id="myForm">
<input type="text" name="username" placeholder="用户名" required>
<input type="email" name="email" placeholder="邮箱" required>
<button type="submit">提交</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
const username = this.querySelector('[name="username"]');
const email = this.querySelector('[name="email"]');
if (!username.value.trim()) {
event.preventDefault();
alert('请输入用户名');
return;
}
if (!email.value.includes('@')) {
event.preventDefault();
alert('请输入有效的邮箱地址');
return;
}
});
</script>如何处理多个字段的组合验证逻辑
当表单包含多个相互关联的字段时，验证逻辑可能需要更复杂的条件判断。例如，如果用户选择了“自定义”选项，则需要额外填写一个备注字段。这种情况下，可以在 submit 事件中根据当前选中状态动态决定哪些字段需要验证。
立即学习“Java免费学习笔记（深入）”；
<form id="complexForm">
<select name="type">
<option value="standard">标准</option>
<option value="custom">自定义</option>
</select>
<input type="text" name="note" placeholder="备注（仅自定义时需要）">
<button type="submit">提交</button>
</form>
<script>
document.getElementById('complexForm').addEventListener('submit', function(event) {
const type = this.querySelector('[name="type"]');
const note = this.querySelector('[name="note"]');
if (type.value === 'custom' && !note.value.trim()) {
event.preventDefault();
alert('选择自定义时请填写备注');
return;
}
});
</script>基于 input 元素的 value 属性进行实时反馈
除了提交时的验证，还可以利用 input 事件的 value 属性实现实时反馈。这种方式能提升用户体验，让用户在输入过程中就知道哪些字段有问题。通过在 input 事件中更新 UI 状态，可以即时显示错误信息或成功标记。
