JavaScript表单校验需明确触发时机、校验内容、反馈方式及绕过机制；input适合实时反馈（需防抖），blur适合失焦校验；checkValidity仅返回布尔值，reportValidity触发默认提示；正则校验须处理空格、地域适配等边界；禁用原生校验时保留required语义需结合novalidate与手动校验。
JavaScript 表单校验不是“加个 onsubmit 就完事”，关键在**什么时候触发、校验什么、怎么反馈、是否绕过**——这几个点没理清，用户一输错就报红、一粘贴就失效、一按回车就跳转，全是白忙。
用 addEventListener('input') 还是 addEventListener('blur')？
两者适用场景完全不同：input 适合实时反馈（比如密码强度、邮箱格式），但高频触发可能影响性能；blur 更适合“离开字段时校验”，避免干扰用户输入节奏。
-
input：适合短字段（如手机号、验证码）、需即时提示的场景；注意用setTimeout防抖，否则每敲一个字都跑校验 -
blur：适合长文本、地址、备注等；用户填完自然移开焦点，校验更合理 - 千万别只绑
submit—— 用户点提交才发现所有字段红了，体验极差
checkValidity() 和 reportValidity() 的实际差异
这两个是原生 HTML5 表单校验的核心 API，但行为差别很大：
-
checkValidity()只返回true/false，不触发 UI 提示，适合静默判断（比如提交前统一检查） -
reportValidity()会触发浏览器默认气泡提示，并滚动到第一个无效字段——但样式无法定制，且部分老浏览器不支持 - 若用了自定义错误提示（比如红色文字 + icon），必须先调
setCustomValidity('')清空原生状态，否则reportValidity()会优先显示旧错误
正则校验邮箱、手机号时容易忽略的边界
别直接抄网上“万能正则”，真实场景下这些点常翻车：
立即学习“Java免费学习笔记（深入）”；
- 邮箱：
test@example.co.uk合法，但很多正则只认.com；建议用/^[^\s@]+@[^\s@]+\.[^\s@]+$/做基础过滤，后端再严格校验 - 手机号：国内要区分
13x、14x、15x、17x、18x、19x，且不能只看长度（比如 11 位但开头是120就非法） - 空格问题：用户可能粘贴带首尾空格的邮箱，
trim()必须在正则前执行，否则user@domain.com会校验失败
禁用原生校验但保留 required 语义怎么办？
有时设计要求禁用浏览器默认气泡（novalidate on ），但又想保留 required 字段的语义和可访问性（screen reader 仍能读出“必填”）：
- 给
加novalidate属性，关闭默认校验行为 - 保留
required属性在上，不影响 ARIA 识别 - 手动监听
submit，遍历所有required字段，用value.trim() === ''判断是否为空 - 注意：不要只靠
value === ''，用户可能输入空格
最麻烦的不是写校验逻辑，而是**校验时机和反馈方式混在一起**——比如在 input 里调 reportValidity()，结果用户每打一个字都弹气泡。真要稳，得把“检测”“判定”“提示”“清空”四步拆开，各自可控。
