表单提交时页面刷新是浏览器默认行为，需在submit事件处理函数首行调用e.preventDefault()阻止；内联onsubmit="return false"亦可，但推荐addEventListener方式。
为什么表单一提交页面就刷新了
浏览器对 <form> 元素有默认行为：触发 submit 事件后，会收集字段、构造请求、跳转或刷新页面。这不是 bug，是规范行为。但你在用 JS 做前端验证、AJAX 提交或 SPA 路由时，这个默认动作就成了干扰。
关键不是“禁用表单”，而是“阻止事件的默认行为”。必须在事件处理函数里调用 event.preventDefault()，且不能写在异步回调里（比如放在 fetch().then() 里面就晚了）。
addEventListener 里怎么正确阻止默认提交
最稳妥的方式是给表单绑定原生 submit 事件，并在回调第一行就调用 preventDefault()：
document.querySelector('form').addEventListener('submit', function (e) {
e.preventDefault(); // 必须放最前面
console.log('表单没刷新，可以开始校验或发请求了');
});
- 不要用
onclick 绑定在 submit 按钮上——按钮点击不等于表单提交（用户可能按回车、用辅助工具触发）
- 不要漏掉
e 参数，否则无法调用 preventDefault()
- 如果用了箭头函数，注意
this 指向变化，但 e.preventDefault() 不依赖 this，所以没问题
onsubmit 属性里写内联 JS 怎么办
HTML 里直接写 onsubmit="return false" 是最简方式，本质是告诉浏览器：“我不处理，默认行为取消”：
<form onsubmit="return false">
<input name="email">
<button type="submit">提交</button>
</form>
onclick 绑定在 submit 按钮上——按钮点击不等于表单提交（用户可能按回车、用辅助工具触发）e 参数，否则无法调用 preventDefault()
this 指向变化，但 e.preventDefault() 不依赖 this，所以没问题onsubmit="return false" 是最简方式，本质是告诉浏览器：“我不处理，默认行为取消”：
<form onsubmit="return false"> <input name="email"> <button type="submit">提交</button> </form>
但更推荐返回一个表达式，方便调试：
<form onsubmit="validateForm() && sendAjax(); return false">
-
return false在内联 handler 中 =preventDefault() + stopPropagation()，通常够用 - 如果表单嵌套或有事件委托需求，建议改用
addEventListener，避免stopPropagation()干扰其他逻辑 - 内联写法不利于测试和复用，仅适合原型或简单场景
阻止之后还要手动触发表单数据收集吗
不用。调用 preventDefault() 只是取消提交动作，FormData、form.elements、form.querySelector('input').value 这些获取值的方式完全不受影响：
form.addEventListener('submit', function (e) {
e.preventDefault();
const data = new FormData(form); // ✅ 正常工作
const email = form.email.value; // ✅ 也正常
fetch('/api/login', { method: 'POST', body: data });
});
容易忽略的一点：如果你用 form.reset() 清空表单，它不会触发 submit 事件，也不需要 preventDefault() —— 它只是 DOM 操作。
