在表单提交前检查字段错误状态，最直接的方法是在表单元素上监听 submit 事件，并在事件处理函数中验证所有字段的合法性。如果存在错误，调用 event.preventdefault() 阻止默认提交行为；若全部通过，则允许表单正常提交。这种方法能确保在数据发送到服务器之前完成客户端校验。

如何获取并验证单个输入框的值

要验证单个输入框，可以通过 document.getElementById 或 querySelector 获取 DOM 节点，然后读取其 value 属性。结合 HTML5 的约束验证 API（如 checkValidity()）可以简化逻辑，无需手动编写正则表达式即可判断字段是否符合类型、必填等要求。

Submit

<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）、类型

下载

Register

<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。开发者应依赖此返回值而非手动解析字符串，以确保与浏览器原生校验逻辑一致。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南