如何用javascript验证表单数据【教程】

表单提交必须先调用event.preventDefault()阻止默认行为再校验，否则校验无效；邮箱用 /^\S+@\S+.\S+$/、手机号用 ^1[3-9]\d{9}$ 即可；正则前需trim()；密码等业务规则前后端均需校验；实时校验要防抖；blur时必校验；错误提示须绑定具体字段并支持无障碍。

表单提交时阻止默认行为再校验

直接在 submit 事件里做验证但没调用 event.preventDefault()，表单照样会提交，校验形同虚设。必须先阻止跳转或刷新，再逐项检查。

• 给
  绑定 addEventListener('submit', handler)，不要只靠 onsubmit 内联写法
• handler 第一行就写 event.preventDefault()，否则后续所有校验逻辑都可能被绕过
• 校验通过后再用 form.submit() 手动提交（需注意：这不会再次触发 submit 事件）

邮箱、手机号等格式用正则但别过度复杂

用 /^[^\s@]+@[^\s@]+\.[^\s@]+$/ 校验邮箱足够应对多数场景；追求 RFC 5322 完全合规的正则既难维护又无必要。手机号同理，国内优先匹配 ^1[3-9]\d{9}$，而非试图覆盖所有国家格式。

• 避免把正则写成 /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ 这类看似严谨实则拒绝合法邮箱（如 test+tag@example.com）的表达式
• 正则校验前先用 trim() 去首尾空格，否则 " user@domain.com " 会被误判失败
• 对密码强度等业务规则，别只靠前端正则——后端仍需重复校验，前端只是体验优化

实时校验要防抖，别每敲一个字都跑一遍

监听 input 事件做实时提示时，若不加防抖，用户快速输入会频繁触发校验、DOM 更新甚至接口请求，造成卡顿或误报。

• 用 setTimeout + clearTimeout 实现简易防抖，延迟 300ms 再执行校验
• 失去焦点（blur）时必须立即校验一次，这是用户明确表达“我要填完了”的信号
• 不要在 input 里直接修改 value（比如自动补全括号），容易干扰用户输入节奏

错误提示要绑定到具体字段，别只弹 alert

用 alert() 或 console.log() 提示错误，用户无法知道哪个字段出问题，更没法聚焦修正。必须把错误信息关联到对应

的视觉反馈上。

• 为每个字段添加 ，校验失败时填入文字并显示（display: block）
• 同时给 input 添加 aria-invalid="true" 和 aria-describedby="error-id"，保障屏幕阅读器可用
• 校验失败后调用 input.focus()，把光标定位到第一个错误项，减少用户查找成本

真实项目里最常被忽略的是：服务端返回 400 错误时，错误字段名和前端 DOM 的 name/id 不一致，导致前端找不到对应元素来展示提示——前后端约定好字段标识，比写一百行校验逻辑还关键。