JavaScript表单验证需监听submit事件并调用preventDefault()拦截默认行为；禁用原生required等属性，改用validity对象或reportValidity()（注意兼容性）；正则验证要贴合实际场景；错误提示须兼顾可访问性与用户体验；异步验证应提前触发并缓存结果。
JavaScript 表单验证不是靠 required 属性堆出来的，而是靠监听、拦截和反馈——否则用户点提交就跳转了，验证根本没机会生效。
用 addEventListener('submit') 拦住表单默认行为
HTML 的 required、type="email" 等只触发浏览器原生提示，不可控、不统一、样式难改。真要自定义逻辑，必须用 JS 拦截提交事件：
- 给
绑定submit事件，不是给按钮绑click - 第一件事是调用
event.preventDefault()，否则页面会刷新或跳转 - 验证失败时不要
return false，它在现代事件监听中无效；只靠preventDefault()就够
检查 input.reportValidity() 前先看浏览器兼容性
reportValidity() 能触发原生校验并返回布尔值，但 IE 完全不支持，Safari 10.1+ 才开始支持。实际项目中：
- 如果只要兼容 Chrome/Firefox/Edge（≥79），可放心用
input.reportValidity()或form.reportValidity() - 若需兼容 Safari ≤10 或旧版 Edge，得手动读
input.validity对象的各字段，比如input.validity.valueMissing、input.validity.typeMismatch - 注意：
reportValidity()会弹原生气泡提示，想完全自定义 UI 就别调它，直接查validity+validationMessage
手动验证邮箱、手机号等要用正则，但别信网上抄来的“万能正则”
例如邮箱验证，/^[^\s@]+@[^\s@]+\.[^\s@]+$/ 比「必须含字母+数字+特殊符号」那种更贴近真实场景，且不会误杀 me+newsletter@gmail.com 这类合法地址。
js-实现原生表单提交验证
下载
原生js表单提交验证代码下载。原生JavaScript实现，适合新手学习js。用户填写完成后，点击提交按钮，判断填写的信息是否符合要求，如不符合将弹出相应的修改信息要求，引导用户正确填写表单。
立即学习“Java免费学习笔记（深入）”；
- 手机号优先按目标国家规则写：中国大陆用
^1[3-9]\d{9}$，别用带区号或座机的复杂模式 - 密码强度建议分层反馈，而不是“不通过”：分别检测长度、大小写字母、数字、特殊字符，逐条提示
- 正则写完一定要用真实数据测：空格、中文输入法残留、粘贴带换行的内容，都可能让
.value.trim()漏掉
验证后显示错误信息，别只改 innerHTML
单纯往 里塞文字，会导致屏幕阅读器无法感知，也不利于 CSS 控制状态。
- 给对应
input加aria-invalid="true"，错误信息容器加role="alert" - 用
input.setCustomValidity('用户名已存在')配合checkValidity()，能让form.checkValidity()统一返回 false - 清空错误时别忘了
input.setCustomValidity('')，否则后续验证永远失败
最常被忽略的是异步验证（比如用户名是否可用）：它不能塞进 submit 事件同步执行，得提前用 blur 或 input 触发，并缓存结果、防重复请求——否则用户狂点提交，接口直接被刷崩。
