如何用JavaScript进行表单验证_正则表达式有哪些常用模式

该用正则做格式初筛，但不能替代后端校验；适合邮箱结构、手机号位数等，不适合语义判断；需注意边界条件、兼容性及与原生验证的冲突。

表单验证该不该用正则？先看这三点

纯前端验证不能替代后端校验，但能立刻反馈、减少无效请求。正则适合做格式初筛（比如邮箱结构、手机号位数），不适合做语义判断（比如邮箱是否真实存在）。别用 /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ 验证所有邮箱——它会放过 test@.com，也会拒绝 user+tag@example.co.uk。

这些正则模式在表单里最常踩坑

以下模式按实际使用频率和出错率排序，重点标出边界条件和兼容性注意点：

• ^\d{11}$：匹配 11 位数字，但中国手机号有带 +86 或空格的合法输入，建议先 .replace(/\s+/g, '') 清理再验证
• ^[^\s@]+@[^\s@]+\.[^\s@]+$：比“教科书邮箱正则”更宽松，能接受常见国际化域名，但不校验 TLD 长度（如 .travel）
• ^1[3-9]\d{9}$：国内手机号基础校验，注意避开已停用号段（如 140–144，170–171 等虚拟运营商号需额外查库）
• ^[a-zA-Z0-9_\u4e00-\u9fa5]{2,16}$：用户名支持中英文数字下划线，2–16 字符，必须加 ^ 和 $ 锚定开头结尾，否则 " admin " 也能通过

怎么把正则塞进 addEventListener('submit') 里？

别在 submit 事件里只调 return false，要逐字段验证并聚焦第一个错误项。关键逻辑是：遇到失败立即 event.preventDefault()，并 input.focus()，否则用户看不到哪错了。

document.getElementById('myForm').addEventListener('submit', function (e) {
  const email = document.getElementById('email').value.trim();
  const phone = document.getElementById('phone').value.replace(/\s+/g, '');
  
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    alert('邮箱格式不对');
    e.preventDefault();
    document.getElementById('email').focus();
    return;
  }
  
  if (!/^1[3-9]\d{9}$/.test(phone)) {
    alert('手机号格式不对');
    e.preventDefault();
    document.getElementById('phone').focus();
    return;
  }
});

为什么 input[type="email"] 不能直接信？

浏览器原生验证只跑 ^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$ 这类极简正则，且不同浏览器行为不一致。Chrome 允许 test@@example.com，Safari 却报错；Firefox 对中文邮箱直接拒绝。更麻烦的是：它无法配合自定义提示文案，setCustomValidity() 又容易和原生冲突。所以建议：关掉原生验证（novalidate 属性），全由 JS 控制。

真正难的不是写出正则，而是决定什么时候该用正则、什么时候该查接口、什么时候该让用户自己确认。比如身份证号，正则只能校验长度和末位校验码，但无法判断是否已注销或重复注册——那得调后端接口。