在表单提交前检查字段错误状态，最直接的方法是在表单元素上监听 submit 事件，并在事件处理函数中验证所有字段的合法性。如果存在错误，调用 event.preventdefault() 阻止默认提交行为；若全部通过，则允许表单正常提交。这种方法能确保在数据发送到服务器之前完成客户端校验。
如何获取并验证单个输入框的值
要验证单个输入框，可以通过 document.getElementById 或 querySelector 获取 DOM 节点，然后读取其 value 属性。结合 HTML5 的约束验证 API（如 checkValidity()）可以简化逻辑，无需手动编写正则表达式即可判断字段是否符合类型、必填等要求。
<form id="myForm">
<input type="text" id="username" required>
<button type="submit">Submit</button>
</form>
<script>
const form = document.getElementById('myForm');
const usernameInput = document.getElementById('username');
form.addEventListener('submit', function(event) {
if (!usernameInput.checkValidity()) {
event.preventDefault();
alert('Username is invalid');
}
});
</script>如何处理多个字段的组合校验
当表单包含多个字段时，需要遍历所有需要校验的元素。可以使用 querySelectorAll 选择器获取一组输入框，然后逐个检查其有效性。如果发现任何一个字段无效，就立即停止后续检查并阻止提交，同时可以聚焦到第一个错误字段以提升用户体验。
javascript-typescript-typescript-scaffold
下载
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
立即学习“Java免费学习笔记（深入）”；
<form id="multiForm">
<input type="email" id="email" required>
<input type="password" id="pass" required minlength="6">
<button type="submit">Register</button>
</form>
<script>
const multiForm = document.getElementById('multiForm');
const inputs = multiForm.querySelectorAll('input[required]');
multiForm.addEventListener('submit', function(event) {
let isValid = true;
for (let input of inputs) {
if (!input.checkValidity()) {
isValid = false;
input.focus();
break;
}
}
if (!isValid) {
event.preventDefault();
}
});
</script>基于 checkValidity() 返回的具体布尔值问题
checkValidity() 方法返回一个布尔值，表示当前元素是否满足其约束条件。如果字段为空但标记为 required，或者邮箱格式不符合规范，该方法将返回 false。开发者应依赖此返回值而非手动解析字符串，以确保与浏览器原生校验逻辑一致。
