应将仅作视觉容器，强度计算须由JS独立完成并显式设置low/high/optimum；推荐集成zxcvbn库，配合CSS类切换颜色、添加无障碍属性及防抖校验。
用 <meter></meter> 显示密码强度，但别直接信它的默认行为
浏览器原生 <meter></meter> 标签能画进度条，但对密码强度这种“无固定上限、语义模糊”的场景，它容易误导人。比如设 min="0" max="100" value="65"，用户会以为 65/100 就是标准分，实际密码强度没统一量纲——长度、大小写、数字、符号的权重怎么算？<meter></meter> 不管这些，只负责渲染。
实操建议：
- 把
<meter></meter>当纯视觉容器，不依赖它的语义做校验逻辑；强度计算必须在 JS 里独立完成 - 显式设置
low、high、optimum属性，否则浏览器可能按默认值（如low=0.25）着色，和你的强度分级对不上 - Chrome 和 Firefox 支持
<meter></meter>，但 Safari 对low/high的颜色响应较弱，建议用 CSS::-webkit-meter-bar和::-moz-meter-bar补充控制
用 div + JS 手动控制更稳妥，尤其要兼容旧浏览器
很多项目仍需支持 IE11 或老版 Edge，<meter></meter> 在这些环境里要么不渲染，要么样式不可控。这时候用 <div class="pw-strength-bar"> 配合内联 <code>style="width: 65%" 反而更稳。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 别用
innerHTML拼接宽度值，改用element.style.width = score + '%'，避免 XSS 风险（尤其当分数来自用户输入时） - 给进度条加
aria-valuenow、aria-valuemin、aria-valuemax，让读屏软件能读出当前强度等级 - 颜色变化别只靠 width，用 class 切换（如
strength-low/strength-medium/strength-strong），方便统一维护配色和过渡动画
密码强度计算函数不能只看字符种类，得防“aaa123!”这种假强密码
常见错误是统计“有没有大写”“有没有数字”就给加分，结果 aaa123! 得 80 分——它长度短、无随机性、含常见模式。真有用的强度判断得结合：
- 基础长度（
password.length ） - 字符多样性（但不是简单布尔值：重复字符多扣分，连续键盘序列如
qwerty扣分） - 是否匹配常见弱口令库（前端可轻量查前 100 个，后端必须全量校验）
- 推荐直接集成
zxcvbn库，它返回score: 0–4和feedback，比手写靠谱得多
CSS 控制进度条高度、圆角和颜色时，别漏掉 focus 状态
进度条常放在表单里，用户 tab 到密码输入框后，焦点可能落在进度条上（尤其用了 tabindex="0"）。如果没定义 :focus 样式，键盘用户会困惑“现在聚焦在哪”。
实操注意：
- 用
outline或box-shadow做 focus 样式，别只改 border（影响布局） -
height设为6px或0.375rem，太粗像按钮，太细看不见 - 圆角用
border-radius: 999px，比4px更通用，适配各种高度 - 颜色梯度别用纯红→黄→绿，考虑色觉障碍用户，加图标或文字标签（如“弱 / 一般 / 强”）
最麻烦的其实是“强度反馈时机”：是输完才校验？还是每输入一个字符都算？后者体验好，但得防高频触发卡顿——debounce 至少 200ms，且跳过空格、退格等非内容键。
