在表单提交前检查必填字段，最直接的做法是监听表单的 submit 事件，并在回调函数中调用 event.preventdefault() 来阻止默认提交行为。你需要遍历所有必填输入框，验证其值是否为空，如果存在未填写的字段，则通过 setcustomvalidity() 方法设置自定义错误信息并返回 false；只有当所有字段都合法时，才允许表单正常提交。
如何获取并验证单个输入框的值
要验证单个输入框，可以通过 document.getElementById() 或 querySelector() 获取 DOM 元素，然后读取其 value 属性。如果值为空字符串，即视为未填写。以下是一个简单的验证逻辑示例：
const input = document.getElementById('username');
if (input.value.trim() === '') {
console.log('用户名不能为空');
}
这段代码展示了如何获取输入框并检查其内容。在实际应用中，通常会将其封装成一个函数，以便在多个字段上复用。注意使用 trim() 可以去除首尾空格，避免用户只输入空格的情况被误判为有效。
如何在 submit 事件中统一处理所有必填项
将单个字段的验证逻辑整合到表单的 submit 事件中，可以实现统一的拦截和提示。我们需要遍历表单中的所有必填元素，逐一检查。如果发现任何字段无效，就立即停止检查并阻止提交。
上述代码演示了如何在 submit 事件中逐个检查字段。虽然这种方法直观，但当字段较多时，代码会变得冗长。更优雅的方式是使用 checkValidity() 方法结合 HTML5 的 required 属性，或者手动管理错误状态。
如何利用 setCustomValidity 提供原生风格的错误提示
使用 setCustomValidity() 方法可以提供与浏览器原生验证风格一致的错误提示。当给输入框设置非空的自定义错误消息时，浏览器会认为该字段无效，并阻止表单提交，同时在输入框旁显示红色的错误提示气泡。若要将错误清除，只需传入空字符串即可。
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
const inputs = this.querySelectorAll('input[required]');
let isValid = true;
inputs.forEach(input => {
if (input.value.trim() === '') {
input.setCustomValidity('此字段为必填项');
isValid = false;
} else {
input.setCustomValidity('');
}
});
if (!isValid) {
event.preventDefault();
}
});
</script>
这段代码通过遍历所有带有 required 属性的输入框，动态设置或清除自定义验证消息。这种方式不仅实现了提交前的检查，还利用了浏览器的内置 UI 来展示错误，提升了用户体验。当用户修正错误后，再次提交时，由于 setCustomValidity('') 已被调用，表单将允许提交。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
