JavaScript 表单提交应监听 form 的 submit 事件并调用 e.preventDefault() 暂停默认行为；校验通过后调用 e.target.submit() 触发原生提交，失败则阻止并提示；避免监听按钮 click 或误用 e.submit()。
JavaScript 处理表单提交事件的核心在于监听 submit 事件、阻止默认行为，并按需执行自定义逻辑——不是简单“拦住就完事”，而是要兼顾校验、数据处理与用户反馈。
正确监听 submit 事件
必须监听表单元素（）的 submit 事件，而不是按钮的 click 事件。后者会绕过浏览器原生验证（如 required 属性），导致空字段被忽略。
- ✅ 推荐写法：
form.addEventListener('submit', handler) - ❌ 避免写法：
submitButton.addEventListener('click', ...)（可能跳过 HTML5 验证） - 确保 DOM 就绪后再绑定，例如放在
DOMContentLoaded回调中，或用document.querySelector('form').addEventListener(...)
拦截默认提交并判断是否放行
调用 e.preventDefault() 是必要前提，但它只是“暂停”提交，后续是否真正提交，由你控制。
- 校验失败时：保持
preventDefault()，显示错误提示，不调用任何 submit - 校验通过时：调用
e.target.submit()（即表单自身的原生submit()方法） - ⚠️ 切忌写
e.submit()——e是事件对象，没有submit方法，会报错 - 也避免依赖外部变量如
Pasteform.submit()，除非能 100% 确保其引用稳定
统一校验逻辑，避免漏判
常见错误是分段校验、部分赋值后仍继续执行提交。应先收集所有校验结果，再统一决策。
- 用一个布尔变量（如
isValid）标记整体状态 - 每个字段校验都更新该变量，而非仅在某分支里设
false - 清空错误提示、设置默认值等操作，不能替代校验判断
- 只有
isValid === true时才调用e.target.submit()
支持确认弹窗或异步提交
提交前加二次确认或改用 AJAX，都建立在同一事件流程上：
- 确认场景：用
if (!confirm('确定提交？')) { e.preventDefault(); } - AJAX 场景：校验通过后，用
fetch或XMLHttpRequest发送数据，成功后再重定向或清空表单 - 注意：AJAX 提交时不需要调用
e.target.submit()，它只用于触发原生提交（刷新页面）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
