17370845950

表单验证必须同时使用 addEventListener('input') 和 submit 事件：input 实现实时反馈，submit 作为防绕过兜底；正则需严格使用 ^ 和 $ 锚定边界，并配合 trim() 处理空格，所有前端校验均不可替代服务端验证。

表单验证该用 addEventListener('submit') 还是 oninput？

直接绑定 submit 事件是最稳妥的兜底方式，但用户体验差；oninput（或 addEventListener('input')）适合实时反馈，但不能替代提交时的最终校验。两者必须共存：前端交互用 input，防绕过用 submit。

• 只监听 input 而忽略 submit，用户禁用 JS 或手动修改 DOM 后可绕过验证
• blur 适合“失焦即校验”，比如邮箱、用户名，但对密码二次确认这类成对字段不友好
• 移动端软键盘回车可能不触发 input，需额外监听 change 或 keydown（判断 event.key === 'Enter'）

^ 和 $ 在表单正则里为什么经常被漏掉？

没加 ^ 和 $ 的正则（如 /\d{6}/）会匹配任意含 6 位数字的字符串，比如 "abc123456def" 也会通过——这显然不是你想要的“6 位纯数字”验证。

• 手机号验证写成 /1[3-9]\d{9}/ ❌ → 应写成 /^1[3-9]\d{9}$/ ✅
• 邮箱常见错误：/\w+@\w+\.\w+/ ❌（匹配 "a@b.c.d.e" 或 "x@y.z@test"）→ 必须用 /^[^\s@]+@[^\s@]+\.[^\s@]+$/ ✅
• 密码强度要求“至少 8 位且含大小写字母和数字”：用 ^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$，每个 (?=.*...) 是正向先行断言，^ 和 $ 锁定整体范围

中文、空格、特殊字符怎么安全处理？

用户粘贴、输入法切换、全角字符都会让正则意外失效。不要假设用户只打半角 ASCII。

• 用户名禁止空格和控制字符：/^[^\s\u2000-\u200F\u3000-\u303F\uFF00-\uFFEF]+$/（排除常见全角空格、中文标点区间）
• 中文姓名建议宽松匹配：/^[\u4e00-\u9fa5\·]{2,20}$/（\· 是中文顿号，部分姓名含此符号）
• 邮箱本地部分允许中文（如 QQ 邮箱）：不能简单用 \w，得用 [^\s@]+ + 白名单字符预处理，或直接交由后端 SMTP 校验
• 所有正则校验前先 .trim()，否则 " 123 " 会因首尾空格导致 /^\d+$/ 失败

正则写完怎么快速验证边界情况？

别靠肉眼想“应该没问题”，用真实脏数据测：

const tests = [
  "test@example.com",
  " test@example.com ", // trim 后应通过
  "test@.com",          // 缺少域名主体，应失败
  "test@@example.com",  // 双 @，应失败
  "测试@中文.中国",      // 含中文，看是否允许
  "a@b.c.d.e",          // 多级域名，看是否过度宽松
];
tests.forEach(t => console.log(t, /^[\w.-]+@[\w.-]+\.\w+$/.test(t))); // 注意这里没加 ^$，故意暴露问题

复杂正则建议拆解测试：先单独验证邮箱本地部分 /^[^\s@]+$/，再验证域名部分 /^[^\s@]+\.[^\s@]+$/，最后组合。线上环境别用 new RegExp(string) 拼接用户输入，有注入风险。

正则只是第一道过滤，真正可靠的验证永远在服务端——前端正则再严密，也拦不住 cURL 直发请求。