表单验证必须同时使用 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 直发请求。
