密码强度校验应绑定input事件实时反馈，分项正则检测基础规则，结合zxcvbn库识别语义弱口令，并用autocomplete="new-password"平衡自动填充与校验需求。
密码输入框绑定 input 事件实时校验
直接监听 input 事件比 blur 或 change 更适合强度实时反馈，因为用户每敲一个键都能触发。注意别用 keydown——它在输入法上屏前就触发，会导致中文输入时误判。
实操建议：
- 给密码
<input type="password">绑定addEventListener('input', handler) - 避免在 handler 中频繁调用 DOM 操作（比如反复
innerHTML），改用textContent或预先创建提示元素后只更新文本 - 移动端需注意：iOS Safari 对
input事件在粘贴后可能延迟触发，可额外监听paste并加setTimeout(..., 0)补偿
用正则分项匹配比单条“强密码正则”更可控
网上常见的“一条正则搞定所有要求”（如 ^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$]).{8,}$）看似简洁，但实际无法告诉用户缺哪一项，也不好动态打分。分项检测才是工程实践的常态。
实操建议：
- 定义四类规则并分别测试：
/[a-z]/（小写字母）、/[A-Z]/（大写）、/\d/（数字）、/[!@#$%^&*(),.?":{}|]/（特殊字符） - 长度单独用
value.length >= 8判断，避免正则里写.{8,}带来回溯风险 - 每项命中加 1 分，总分 0–5，对应「极弱→强」；分数变化时再统一更新 UI 状态，而不是每个条件都去改样式
zxcvbn 库比手写规则更防“password123”这类弱口令
纯正则无法识别常见单词、键盘序列、年份组合等语义弱密码。这时候引入 zxcvbn 是性价比最高的选择——它体积小（压缩后约 80KB）、无依赖、API 极简。
实操建议：
- 通过 CDN 引入：
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script> - 调用
zxcvbn(password)返回对象，重点关注score（0–4）、feedback.suggestions（如“加个数字或符号”）、feedback.warning（如“太常见”） - 不要完全弃用基础正则：先用正则筛掉空值、纯空格、过短等硬性不合规项，再交由
zxcvbn做语义分析，避免无效计算
禁用自动填充但保留用户体验的折中方案
浏览器自动填充的密码常绕过前端校验，导致表单提交时才发现强度不足。但粗暴加 autocomplete="off" 在现代浏览器中基本失效，且影响密码管理器使用。
实操建议：
- 对密码字段设
autocomplete="new-password"（不是off），Chrome/Firefox 会尊重此语义，不填旧密码 - 如果页面有“确认密码”字段，它必须设为
autocomplete="new-password"，否则主密码字段可能被错误填充 - 检测到自动填充后（如
input事件中event.inputType === 'insertFromPaste'或值突变），主动触发一次强度重算
真正难的是平衡：既要让用户清楚知道哪里不够强，又不能因过度提示引发烦躁；既要防住 123456 和 iloveyou2023，又不能把合理长密码（如随机单词组合）误判成弱口令。正则打底 + zxcvbn 补漏 + 合理的 autocomplete 控制，是目前最稳的三角组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
