漏写 event.preventdefault() 会导致页面刷新、验证失效、请求发不出去；它不是可选优化，而是异步提交的强制门槛，必须放在事件处理器第一行。
submit 事件里没调 event.preventDefault() 就直接发请求
页面刷新、验证失效、请求发不出去——三者往往同时出现，根源就是这一行漏了。event.preventDefault() 不是“可选优化”，而是异步提交的强制门槛。只要没它，浏览器就会照常走原生提交流程：跳转、刷新、清空表单，fetch 请求哪怕写得再对也根本没机会执行。
常见错误写法：
– 在按钮 onclick 里发 fetch，但没绑定 form 的 submit 事件
– 写了 form.addEventListener('submit', ...)，却把 preventDefault() 放在验证通过之后（验证失败时就漏掉了）
– 用内联 onsubmit="return false"，但返回值被其他逻辑覆盖（比如函数末尾没显式 return）
- 正确姿势：handler 第一行必须是
event.preventDefault()，雷打不动 - 验证逻辑放后面，不管成不成功，阻止默认行为这一步已经完成
- 别依赖按钮点击事件替代 submit 事件——只有 submit 事件能触发 HTML5 原生校验（如
required、pattern）
form.checkValidity() 和 input.checkValidity() 混用导致状态错乱
想复用浏览器原生验证逻辑，但又手动改了 setCustomValidity 却没清空，结果表单看起来“通过”了，实际 checkValidity() 返回 false；或者反过来，字段明明填错了，但因为没触发 input 的 invalid 事件，form.checkValidity() 还是 true。
关键点在于：HTML5 验证不是静态快照，而是动态依赖于每个 input 的 validity 状态和用户交互时机。
-
form.checkValidity()会遍历所有可提交控件，只要任一字段 invalid，就返回 false -
input.checkValidity()只查单个字段，但它会触发invalid事件（可用于实时反馈），而form.checkValidity()不会 - 手动调用
setCustomValidity('msg')后，必须在字段修正后调用setCustomValidity('')，否则 validity 始终为 invalid - 移动端 Safari 对
checkValidity()触发时机较敏感，建议在input或blur事件中主动调用并更新 UI，别只等 submit 时才查
异步提交成功后 DOM 没还原，导致重复提交或状态残留
fetch 成功后只弹个 toast，但按钮没恢复、loading 状态没清除、错误提示没移除——用户二次点击，要么发重复请求，要么看到上一次的红框还挂着，体验断裂。
这不是 UI 细节问题，而是状态管理缺失。表单 DOM 本身没有“自动回滚”机制，所有状态都得你亲手重置。
- 提交前禁用按钮：
button.disabled = true，成功/失败后必须设回false - 清空自定义错误提示：
input.setCustomValidity('')+ 移除aria-invalid和关联的span文本 - 如果用了
form.classList.add('was-validated')，成功后应remove它，否则 :valid/:invalid 伪类可能持续生效 - 不要直接
form.reset()——它会清空所有字段，包括用户刚填好、只是后端校验不通过的合法数据；应只重置验证状态，而非值
后端返回字段级错误，但前端没做 DOM 映射回填
后端返回 {"email": ["邮箱已被注册"], "password": ["密码不能少于8位"]}，前端却只统一弹 alert，用户根本不知道哪错了，只能瞎猜重填——这等于把后端验证白送了。
字段级错误必须精准落到对应 input 上，否则验证链就断在最后一环。
- 遍历响应中的错误对象，用 key 匹配
input[name="email"]这类选择器 - 对每个出错字段：
input.setCustomValidity(msg)+input.reportValidity()（触发原生气泡提示）+ 设置aria-invalid="true" - 注意 name 属性大小写：后端返回
"userName"，但前端是name="username"，就匹配不上 - 如果后端用嵌套结构（如
data.errors.email），前端解析时别硬编码路径，先确认响应 schema 是否稳定
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
