HTML5原生验证仅作快速过滤，关键校验须JS实现：submit中preventDefault、checkValidity优先判断，异步验证需防抖+AbortController+按钮禁用，setCustomValidity统一管理提示。
HTML5 原生 required 和 pattern 能解决大部分基础验证，但别全靠它
浏览器自带的表单验证（如 required、type="email"、pattern）能拦截明显错误，触发 checkValidity() 和 reportValidity()，但存在明显局限：样式不可控、提示文案无法本地化、Safari 对 pattern 支持不稳定、无法做异步校验（如用户名是否已存在）。实际项目中建议只用作第一层快速过滤，关键逻辑必须走 JS 手动验证。
常见错误现象：submit 事件里没调用 event.preventDefault()，导致表单直接提交跳转；或只监听 input 却忽略 blur，用户粘贴内容后未触发校验。
- 对必填字段，优先用
required+ JS 双重保障，避免绕过 HTML 验证提交空值 -
pattern正则需注意：它匹配的是整个字段值（等价于^...$），写pattern="[a-z]+"时用户输"abc123"会失败 - 移动端 Safari 中，
type="number"可能触发数字键盘但允许输入字母，不能替代 JS 类型判断
用 addEventListener('submit') 统一拦截，而不是分散绑 input 事件
把验证逻辑集中在表单的 submit 事件里，比给每个输入框单独监听 input 或 blur 更可靠——它确保用户真正想提交时才执行完整校验，也避免频繁触发影响性能。同时保留 blur 作为辅助反馈（比如失焦时标红），但不依赖它决定是否允许提交。
使用场景：登录、注册、订单确认等需多字段协同校验的流程（例如“密码”和“确认密码”是否一致、“手机号”格式与长度是否匹配）。
立即学习“Java免费学习笔记（深入）”；
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
- 在
submit回调开头立刻调用event.preventDefault()，防止默认提交行为 - 用
form.checkValidity()快速检查原生约束，返回false时可直接return，省去重复判断 - 自定义校验（如两次输入密码比对）放在原生校验之后，避免冗余提示
- 校验失败后，聚焦第一个出错字段：
firstInvalidField.focus()，提升可访问性
手动验证时，用 setCustomValidity() 控制错误消息，而非 alert 或 DOM 操作
setCustomValidity() 是原生 API 提供的标准方式，它让字段参与整体 checkValidity() 流程，并在调用 reportValidity() 时统一展示提示。相比手动插入 <span class="error"></span>，它更轻量、兼容性好（IE10+）、且与屏幕阅读器协作更好。
参数差异：setCustomValidity('') 表示“校验通过”，setCustomValidity('用户名已被占用') 表示失败并设提示文案；传空字符串以外的值才会被判定为无效。
- 每次验证前先调用
input.setCustomValidity('')清除旧状态，否则上次失败会持续影响后续校验 - 不要在
input事件里反复调用setCustomValidity()，容易造成 UI 抖动；适合在blur或submit时设置 - 若需国际化，可在调用
setCustomValidity()前查翻译表，而不是硬编码中文
异步验证（如用户名可用性）必须禁用提交按钮并处理竞态问题
用户输完“用户名”后，发请求查是否已存在，这类操作天然有延迟和不确定性。常见错误是没锁住提交按钮，导致用户连点多次发送重复请求；或后发的请求先返回，覆盖了先发的正确结果（竞态）。
性能影响：频繁输入时若每键都发请求，会浪费带宽、拖慢响应。应加防抖（debounce），延迟 300ms 再发，且在新请求发出前取消上一个 fetch（用 AbortController）。
- 提交按钮初始设为
disabled，所有异步验证完成且全部通过后再启用 - 用
AbortController实现请求取消：const controller = new AbortController(); fetch(url, { signal: controller.signal }) - 校验失败时，仍需调用
input.setCustomValidity('')清空状态，再设新错误文案，否则reportValidity()不会重新触发提示 - 网络异常时，应降级为“请稍后重试”，而不是静默失败
复杂点在于：原生验证和异步验证的生命周期要对齐。容易被忽略的是，用户修改字段后未再次触发异步校验，就直接点提交——这时得在 submit 里主动触发一次，且等待 Promise 完成后再继续后续逻辑。
