必须用event.preventdefault()阻止表单默认提交跳转，推荐addeventlistener绑定submit事件；formdata可安全读取带name属性的字段，注意disabled字段被忽略、多选select需用getall()、转对象时应处理重复key；成功后可用form.reset()清空，但动态字段需手动清理；内联onsubmit写法限制多，应避免。
表单提交时阻止默认跳转行为
浏览器默认会把 <form></form> 提交到 action 指定的 URL，页面刷新或跳转，JS 逻辑根本没机会执行。必须用 event.preventDefault() 拦住它。
常见错误是只写 onsubmit="handleForm()" 却没在函数里调用 preventDefault()，结果表单照常提交、页面刷新、控制台可能连日志都不显示。
推荐写法：
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault(); // 关键！
const data = new FormData(this);
// 后续处理...
});
用 FormData 安全读取表单字段值
FormData 自动收集所有带 name 属性的控件（<input>、<select></select>、<textarea></textarea>），比手动查 value 更可靠——它能正确处理复选框组、文件输入、空值和编码问题。
注意点：
-
FormData不包含disabled的字段 - 多选
<select multiple></select>会返回多个同名条目，用getAll('name')获取数组 - 想转成纯对象？别直接用
Object.fromEntries(formData)—— 它会丢掉重复 key（比如多个 checkbox），应改用Object.fromEntries(Array.from(formData.entries()))并自行合并逻辑
提交后要不要清空表单？
清空不是必须的，但用户连续操作时容易误触重复提交。建议分情况处理：
- 成功处理后，调用
form.reset()—— 它重置所有字段到初始值（HTML 中的value或checked状态），比逐个设value = ''更准确 - 如果表单含动态生成字段（如 JS 添加的 input），
reset()不起作用，得手动清理 - 别在提交前清空，否则
FormData读不到数据
为什么不用 onsubmit 内联写法？
内联写法（如 <form onsubmit="return handle()"></form>）看似简单，但实际限制多：
- 无法访问事件对象
e，除非显式传event，可读性差 - 函数必须显式
return false才能阻止提交，漏写就失效 - 不利于解耦和测试，调试时断点难打
- 多个监听器时，内联方式只能挂一个，而
addEventListener可叠加
真实项目中，哪怕只是本地处理，也优先用 addEventListener + preventDefault 组合。
复杂点在于：表单验证失败时，你得自己高亮错误字段并聚焦；如果后续要发请求，还得考虑 loading 状态和防重复点击——这些都不是 FormData 或 preventDefault 能自动解决的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
