该用正则做格式初筛，但不能替代后端校验；适合邮箱结构、手机号位数等，不适合语义判断；需注意边界条件、兼容性及与原生验证的冲突。
表单验证该不该用正则？先看这三点
纯前端验证不能替代后端校验，但能立刻反馈、减少无效请求。正则适合做格式初筛（比如邮箱结构、手机号位数），不适合做语义判断（比如邮箱是否真实存在）。别用 /^[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 控制。
立即学习“Java免费学习笔记（深入）”；
真正难的不是写出正则，而是决定什么时候该用正则、什么时候该查接口、什么时候该让用户自己确认。比如身份证号，正则只能校验长度和末位校验码，但无法判断是否已注销或重复注册——那得调后端接口。
