e.preventDefault()必须在submit事件回调开头同步执行，否则表单会立即提交；内联onsubmit="return false"会阻断其他监听器；仅绑定按钮click无法覆盖回车等提交路径；校验需手动调用checkValidity()或reportValidity()；DOM未就绪时绑定事件无效；form.submit()不触发submit事件。
onsubmit 事件里不调用 e.preventDefault() 就拦不住提交
表单默认刷新或跳转，不是因为 JS 没执行，而是因为 submit 事件一触发，浏览器就立刻开始提交——除非你第一行就明确告诉它“别动”。e.preventDefault() 必须在事件回调开头同步执行，不能等异步操作（比如 fetch 或校验函数）完了再调。
- 错误写法：
fetch(...).then(() => e.preventDefault())—— 此时页面早已刷新 - 正确写法：
e.preventDefault()必须是回调函数的第一句 - 如果用了内联写法
onsubmit="return false"，虽能拦住，但会阻断后续所有addEventListener('submit', ...)监听器，调试和扩展都困难
为什么只给按钮绑 click 事件根本没用
用户按回车、JS 调用 form.submit()、甚至点击任意 <button></button>（没设 type），最终都会触发 form 元素的 submit 事件。但这些路径不会都触发按钮的 click。
-
<button>提交</button>在<form></form>内默认就是type="submit"，点它 = 触发 submit - 回车键提交，压根不经过按钮 click
- 动态插入的按钮若漏写
type="button"，极易意外触发原生提交
阻止提交 ≠ 表单自动校验，checkValidity() 得手动调
加了 e.preventDefault() 只是停住刷新动作，浏览器原生的 required、type="email" 等校验并不会自动弹出提示或返回结果。
- 想触发校验气泡：调
form.reportValidity() - 只想判断是否通过：调
form.checkValidity()，它返回true/false - 自定义规则（如手机号格式）必须配合
input.setCustomValidity("错误信息")，否则checkValidity()总返回true
DOM 尚未就绪时绑定 submit 事件会失效
如果 JS 代码写在 <form></form> 标签前面，或没等 DOM 加载完就执行 document.querySelector('form').addEventListener('submit', ...)，那监听器根本没绑上——表单一提交，直接走默认流程。
立即学习“前端免费学习笔记（深入）”；
- 稳妥做法：把 JS 放在
</body>前，或包装进DOMContentLoaded回调 - 动态生成的表单（比如 AJAX 插入），得在插入后立即重新绑定，不能只靠初始脚本
- 检查是否生效：在回调里加
console.log('submit captured')，按回车或点按钮看有没有输出
form.submit() 方法调用时根本不会触发 submit 事件，所以你在监听里写的 preventDefault 和校验逻辑对它完全无效。 
