如何用javascript实现表单验证【教程】

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 这类合法地址。

• 手机号优先按目标国家规则写：中国大陆用 ^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 触发，并缓存结果、防重复请求——否则用户狂点提交，接口直接被刷崩。

# ai  # safari  # 浏览器  # css  # edge  # js  # Error  # 堆  # javascript  # java  # class  # html  # 接口  # chrome  # red  # Event  # 邮箱  # firefox  # 表单验证 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】