onsubmit内联写法必须显式return false才能阻止默认提交，因内联环境无event对象；推荐用addeventlistener绑定submit事件并调用e.preventdefault()，配合reportvalidity()校验。
onsubmit 内联写法必须显式 return false
直接在 form 标签里写 onsubmit="handleSubmit();" 不会阻止默认提交——浏览器只看函数返回值，不关心你内部有没有调用 preventDefault()。内联 handler 是字符串求值环境，event 对象根本不存在，所以 event.preventDefault() 会报 ReferenceError: event is not defined。
✅ 正确写法只有两种：
onsubmit="handleSubmit(); return false;"-
onsubmit="event.preventDefault(); return false;"（前提是确保 DOM 已就绪，且浏览器支持）
⚠️ 注意：return false 在这里不是“阻止事件冒泡”，而是告诉浏览器“别执行默认行为”。但它会彻底中断事件流，其他 JS 监听器（比如后续加的 addEventListener('submit', ...)）将完全不执行。
为什么推荐用 addEventListener 而非 onsubmit
内联 onsubmit 看似省事，但实际项目中容易踩坑：
- 多个模块都想监听 submit？
onsubmit只能覆盖，不能叠加 - 动态插入的表单？内联属性得跟着 HTML 一起重写，没法统一初始化
- 和 Vue/React 等框架共存时，
onsubmit可能被框架忽略或覆盖 - 测试困难：无法 mock 或 patch 内联函数，也不方便注入 spy
✅ 推荐写法是等 DOM 就绪后绑定：
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('myForm');
form.addEventListener('submit', (e) => {
e.preventDefault();
const data = Object.fromEntries(new FormData(form).entries());
fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
});
});
阻止默认提交 ≠ 表单已校验
很多开发者加了 e.preventDefault() 就以为万事大吉，结果后端收到空字段或非法邮箱。浏览器原生验证（required、type="email"）不会自动触发，除非你显式调用：
-
form.checkValidity()：只返回true/false，不提示用户 -
form.reportValidity()：显示浏览器默认错误气泡，更友好
如果用了自定义校验（比如手机号正则），还得配合 input.setCustomValidity("请输入11位手机号")，否则 checkValidity() 永远返回 true。
✅ 安全流程应是：
form.addEventListener('submit', (e) => {
e.preventDefault();
if (!form.reportValidity()) return; // 校验失败，气泡已出，不继续
// 后续 AJAX 提交...
});
button type="submit" 必须存在且正确
表单真正触发 submit 事件的，是 button 或 input 的 type="submit"，不是点击本身。常见翻车点：
- 写了
<button>提交</button>，没设type→ 默认就是type="submit"，但容易被忽略 - 误写成
<button type="button">提交</button>→ 点击完全不触发submit事件，JS 监听白搭 - 用
input type="image"或自定义组件提交，却忘了模拟submit事件
✅ 最稳妥做法：显式声明 <button type="submit">提交</button>，并在 JS 中只监听 form 的 submit，别去绑 click。
真正难处理的，往往不是怎么拦，而是拦完之后——数据是否同步、校验是否覆盖边界、失败后状态怎么还原。这些细节比 preventDefault() 本身更容易漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
