HTML5不提供密码强度检测，须用JavaScript的oninput事件实时监听并分层验证规则；提示应置于input后的span中，按满足项数标记强/中/弱，并兼顾色觉障碍与安全策略要求。
HTML5 本身不提供密码强度计算或动态提示功能，input[type="password"] 只负责隐藏输入内容，强度检测必须靠 JavaScript 实现。
用 oninput 实时监听密码输入
别用 onchange 或 onblur——它们只在失焦后触发，无法做到“边打边提示”。oninput 在每次输入、粘贴、删除时都触发，是唯一可靠选择。
- 兼容性好，所有现代浏览器（含 iOS Safari）都支持
- 避免用
keyup：无法捕获右键粘贴、拖拽输入、语音输入等操作 - 建议节流（如 100ms 延迟），防止高频触发影响性能
用正则分层判断强度等级
别依赖单一“密码得分”算法，用户看不懂。按实际安全要求拆解为可感知的规则项更有效：
-
/[a-z]/→ 含小写字母 -
/[A-Z]/→ 含大写字母 -
/[0-9]/→ 含数字 -
/[^a-zA-Z0-9]/→ 含特殊字符（注意：空格也匹配此式） -
.length >= 8→ 长度达标
每满足一项，就标记为 ✅；全部满足再显示“强”；缺 1–2 项标“中”，缺 3 项以上标“弱”。比模糊的“65分”直观得多。
立即学习“前端免费学习笔记（深入）”；
把提示文字和样式绑定到 span 或 div 而非 placeholder
placeholder 是表单提示语，不是状态反馈区，且在输入后自动消失，完全不适合做实时强度展示。
- 在
input后紧跟一个 - 用
textContent更新文字，避免 XSS 风险（不用innerHTML） - 通过 class 切换控制颜色：
weak（red）、medium（orange）、strong（green） - 不要仅靠颜色区分——加图标或文字前缀（如 ⚠️ 弱 / ✅ 强）兼顾色觉障碍用户
真正难的不是写判断逻辑，而是定义“什么叫强”：业务是否允许空格？是否禁用常见弱口令（如 123456、password）？这些规则得从安全策略里来，不能只看字符类型堆砌。
