表单提交必须首行调用event.preventDefault()；FormData默认忽略未选中/空字段；fetch传FormData时勿手动设Content-Type；验证优先用reportValidity()兜底但需JS增强提示。
表单提交时 event.preventDefault() 忘了调用，数据直接刷新页面
浏览器默认会把 <form> 提交当成一次完整页面跳转，哪怕你写了 JS 处理逻辑，只要没拦住默认行为，表单就照常提交、页面照常刷新——你写的 fetch 或表单校验根本没机会执行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有用 JS 监听
submit事件的场景，第一行必须写event.preventDefault() - 别只在条件分支里写，要放在事件处理函数最开头，避免漏掉
- 如果用了
addEventListener，确认绑定的是submit（不是click），且监听对象是<form>元素本身
FormData 构造函数对空值/未选中复选框的处理很“安静”
FormData 不会把未勾选的 <input type="checkbox">、没填的 <input type="text"> 或空 <select> 加进数据，这不是 bug，是设计如此。但后端常依赖字段存在与否做逻辑判断，前端却以为“传了空字符串”或“传了 false”，结果接口报错或逻辑异常。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 需要明确传递布尔状态时，别靠 checkbox 是否存在，改用 hidden input 配合 JS 控制值：
<input type="hidden" name="agree" value="false">，勾选时再用 JS 改成"true" - 调试时用
console.log(Object.fromEntries(new FormData(form)))看实际内容，比FormData.entries()更直观 - 后端接收不到某字段，先查前端
FormData里有没有，而不是急着改后端校验
用 fetch 提交表单时，Content-Type 自动设为 multipart/form-data 但不显示在请求头里
当你把 FormData 直接传给 fetch 的 body，浏览器会自动设置正确的 Content-Type 并附带 boundary，但你在 DevTools 的 Headers 标签页里看不到这个头——它被标记为“自动设置”，且值含动态生成的 boundary。如果你手动加了 headers: { 'Content-Type': 'multipart/form-data' }，反而会破坏请求，导致后端解析失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 提交
FormData时，完全不要手动设置Content-Type请求头 - 需要传 token 或其他认证头？可以加，但只加那些真正需要的，比如
Authorization - 如果后端收不到文件，先看 Network → Payload → View source，确认 boundary 是否存在、字段名是否拼错，而不是怀疑 Content-Type 没设对
表单验证用 checkValidity() 和 reportValidity()，但样式反馈不一致
checkValidity() 只返回布尔值，reportValidity() 除了返回布尔值还会触发浏览器原生气泡提示，但这个提示样式无法定制，且在某些浏览器（如 Safari）里位置偏移、文字难读。更麻烦的是，它只对带 required、type="email" 这类原生约束的字段生效，对 JS 手动加的 setCustomValidity() 也依赖这个机制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
reportValidity()做快速兜底，但别指望它覆盖全部体验；关键流程仍需 JS 主动读取validationMessage、操作 class 或插入提示元素 - 调用
setCustomValidity('')清空自定义错误前，确保字段当前确实有效，否则清空后reportValidity()不再触发 - 移动端上，原生气泡容易被虚拟键盘遮挡，优先用 inline error message + focus 后滚动到字段
表单的“高级”不在花哨交互，而在默认行为、边界条件和浏览器差异怎么稳稳兜住。很多问题不是代码写错了，是没意识到某个 API 的静默规则正在悄悄改写你的数据流。
