表单验证必须同时使用 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。
- 用户名禁止空格和控制字符：
/^[^su2000-u200Fu3000-u303FuFF00-uFFEF]+$/（排除常见全角空格、中文标点区间） - 中文姓名建议宽松匹配：
/^[u4e00-u9fa5·]{2,20}$/（·是中文顿号，部分姓名含此符号） - 邮箱本地部分允许中文（如 QQ 邮箱）：不能简单用
w，得用[^s@]++ 白名单字符预处理，或直接交由 后端 SMTP 校验 - 所有正则校验前先
.trim()，否则"123"会因首尾空格导致/^d+$/失败
正则写完怎么快速验证边界情况？
别靠肉眼想“应该没问题”，用真实脏数据测：
立即学习“Java 免费学习笔记（深入）”；
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 直发请求。
