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 放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
