JavaScript表单验证应“提前拦截+清晰反馈”,邮箱验证需避免简单正则,推荐/^1+@2+.3+$/并限制长度。\s@ ↩\s@ ↩\s@ ↩

JavaScript 表单验证结合正则表达式,核心在于“提前拦截 + 清晰反馈”,而不是等用户提交后才报错。正则不是越复杂越好,关键是匹配常见、典型、有边界的真实输入场景。
邮箱验证:别只信 /\S+@\S+\.\S+/
这个简单写法会通过 test@.com 或 a@b.c,明显不合规范。更实用的是:
- 用
/^[^\s@]+@[^\s@]+\.[^\s@]+$/拦住空格和连续 @; - 加长度限制:
value.length (RFC 5321 规定邮箱总长上限); - 前端验证不替代后端校验,仅提升体验——真正发邮件前仍需 SMTP 确认。
手机号验证:按地区区分,避免一刀切
国内手机号常用 /^1[3-9]\d{9}$/,但它会放过已停用号段(如 140–144),也未考虑携号转网后的虚拟运营商号(如 170/171)。更稳妥的做法:
- 优先用运营商最新号段表做白名单匹配(可存为数组或正则分支);
- 对输入实时去空格、去短横线:
value.replace(/[\s\-()]/g, ''); - 中文界面建议提示“请输入 11 位中国大陆手机号”,比模糊提示更有效。
密码强度:用多个小正则,比一个大正则更可控
写一个 /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#]).{8,}/ 看似全面,但用户根本不知道缺哪项。推荐分步检查:
立即学习“Java免费学习笔记(深入)”;
-
/.{8,}/→ 长度 ≥ 8; → 含小写字母;
→ 含大写字母;→ 含数字;
]/ → 含特殊字符(按产品策略选)。
每项单独判断,对应显示✔️或文字提示(如“请添加一个大写字母”),体验更好。
身份证号:校验位算法比正则更重要
18 位身份证不能只靠 /^\d{17}[\dXx]$/。必须验证最后一位校验码:
- 前 17 位转数字数组,乘以固定权重
[7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2]; - 求和 mod 11,对照校验码表
['1','0','X','9','8','7','6','5','4','3','2']; - 注意大小写兼容:
id.toUpperCase().endsWith(checkCode)。
15 位老身份证建议引导升级,或用兼容逻辑转换后再校验。
正则表达式是工具,不是目的。验证逻辑要贴近用户真实输入习惯,错误提示要具体可操作,前后端规则要保持一致。写完记得在 Edge、Safari 和手机浏览器里实测粘贴、自动填充、IME 输入等场景。











