密码强度校验应使用input事件实时触发，配合节流与多维度打分（长度、大小写字母、数字、特殊符号），避免硬性规则和pattern依赖，注重用户可理解的渐进式反馈。
密码强度校验该用哪个事件触发
别等用户点提交才校验，体验差还容易漏检。用 input 事件实时监听，比 blur 更及时，比 change 更灵敏——只要输入框内容变化就触发，包括粘贴、删除、键盘输入。
注意：别在 input 里直接调用耗时逻辑（比如正则反复匹配长字符串），否则卡顿。把校验逻辑节流到 200ms 内执行一次即可。
怎么定义“强/中/弱”三档标准
别自己拍脑袋定规则。主流做法是按字符类型覆盖 + 长度组合打分，例如：
- 长度 ≥ 8 分 1 分，≥ 12 分 2 分
- 含小写字母分 1 分
- 含大写字母分 1 分
- 含数字分 1 分
- 含特殊符号（如
!@#$%^&*）分 1 分
总分 0–2 为弱，3 为中，4–5 为强。不推荐用「必须同时含大小写+数字+符号」这种硬性要求——它导致用户堆砌 Password123! 这类看似合规实则易猜的密码。
立即学习“前端免费学习笔记（深入）”；
pattern 属性能替代 JavaScript 校验吗
不能。HTML 的 pattern 只在表单提交时生效，且只做「通过/不通过」二值判断，无法返回强度等级、无法实时反馈、无法兼容老浏览器（IE 不支持）。更关键的是：pattern 无法检测字符类型分布，只能写死正则，比如 pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}"，但这个正则根本没法告诉你当前输到一半是“中”还是“弱”。
所以 pattern 只适合做最终兜底，主逻辑必须用 JS 实现。
如何避免正则误判和性能陷阱
常见错误是写一堆 test() 调用，比如连续判断是否含大写、小写、数字……其实可以一次正则提取所有匹配项：
const pwd = input.value; const categories = [ /[a-z]/g, /[A-Z]/g, /\d/g, /[^a-zA-Z\d\s]/g ]; const score = categories.filter(re => pwd.match(re)?.length > 0).length;
注意点：
- 别用
.*开头的贪婪正则去匹配整个密码，效率低；用/[a-z]/g这种简单模式即可 - 特殊符号正则要排除空格（
\s），否则用户输个空格也会计分 - IE11 不支持
?.length，需改用pwd.match(re) !== null
真正难的不是写对正则，而是让用户看懂反馈——比如在输入框旁显示「弱（缺少大写字母）」而不是只变红。这点常被忽略，但直接影响密码实际安全性。
