必须用input事件，因它覆盖粘贴、删除、输入法等所有输入场景，可实现实时反馈；change和blur仅失焦触发，无法满足边输边提示需求。
密码强度校验该用哪个事件监听
必须用 input 事件，不是 change 或 blur。后者只在失焦或提交时触发，无法做到“打字过程中实时反馈”。input 事件在每次输入（包括粘贴、删除、中文输入法未确认前）都会触发，适合做即时检测。
注意：Safari 对粘贴操作的 input 触发有延迟，可额外监听 paste 事件并加 setTimeout 微任务兜底。
- 不要绑定
keyup：漏掉鼠标粘贴、长按删除、语音输入等场景 - 避免在
input回调里直接调用耗时计算（比如正则全局匹配+多次 test），否则卡顿明显 - 建议对空值或长度
怎么定义“强密码”的判断规则才合理
别照搬 NIST-800-63B 原文硬套，前端提示只需轻量、可感知、无歧义。推荐用四档分级（弱 / 中 / 强 / 很强），每档对应具体可验证条件：
- 弱：
password.length - 中：
password.length >= 8且满足任一：含小写字母、含大写字母、含数字、含符号（如/[!@#$%^&*]/） - 强：长度 ≥ 8 + 至少三类字符混合
- 很强：长度 ≥ 12 + 四类字符全齐，且不含常见弱口令子串（如
"123"、"abc"、"password"）
注意：正则不要写 /[a-z]+[A-Z]+[0-9]+/ 这种顺序依赖型——它要求小写必须在大写前面，实际密码是乱序的。正确写法是分别 test() 四次，或用 /(?=.*[a-z])(?=.*[A-Z]).../ 零宽断言。
立即学习“前端免费学习笔记（深入）”；
DOM 更新时如何避免重复渲染和样式抖动
提示文案和颜色变化必须复用同一个 <span> 元素，而不是每次删掉旧节点再 appendChild 新节点。否则会触发浏览器重排，尤其在移动端容易肉眼可见闪烁。
推荐结构：<input type="password" id="pwd"><span id="pwd-tip"></span>，只更新 textContent 和 className：
const tip = document.getElementById('pwd-tip');
tip.textContent = '强';
tip.className = 'tip-strong'; // CSS 控制颜色/背景
- 不要用
innerHTML插入 HTML 字符串，防止 XSS（即使当前可控，也养成习惯） - 所有提示文案统一用英文短词（Weak / Fair / Strong / Very Strong），避免中英文混排导致宽度跳变
- 如果用了 CSS transition，确保只对
color和opacity做过渡，别对height或display动画
为什么用户粘贴密码后强度没更新
这是最常被忽略的坑：input 事件在 Safari 和部分 Android WebView 中，对粘贴操作响应滞后——有时要等输入法确认完毕才触发，有时甚至不触发。
解决方案是双保险监听：
- 主逻辑仍绑
input事件 - 额外加
addEventListener('paste', e => { setTimeout(() => validate(), 0); })
注意 setTimeout(..., 0) 不是为了“等数据”，而是把校验推到下一个宏任务，确保粘贴内容已写入 input.value。Chrome/Firefox 下 paste 后立即读 value 是空的，必须延后。
真正难处理的是中文输入法“上屏前”状态——用户敲了 “mima123”，但还没按空格，此时 value 是 “mima”，input 事件已频繁触发。这种场景下强度提示可暂不更新，或加个 300ms 防抖，避免误判。
