纯CSS无法实时计算密码强度，但可通过pattern+:user-invalid+属性选择器分层模拟弱/中/强三档反馈，关键在于正则拆解、required配合及浏览器验证时机控制。
纯 CSS 无法实时计算密码强度，但可以用 pattern + :user-invalid + 属性选择器分层模拟三档反馈（弱/中/强），关键在于正则拆解与浏览器验证时机的配合。
用 [pattern] 匹配不同强度层级
不要试图用一个正则覆盖所有规则——浏览器对 pattern 的校验是“全匹配或全不匹配”，没法返回中间状态。正确做法是准备多个 input 元素（或用 JS 切换 pattern 值），每个对应一档强度：
-
<input type="password" required pattern="[a-z]{8,}">→ 仅小写字母+长度，标为“弱” -
<input type="password" required pattern="(?=.*[a-z])(?=.*[A-Z]).{8,}">→ 大小写，标为“中” -
<input type="password" required pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-zA-Z\d]).{10,}">→ 四类字符+更长，标为“强”
注意：pattern 不要加 ^ 和 $，浏览器会自动包裹；避免 .* 开头，否则空输入也可能意外匹配。
靠 :user-invalid 触发视觉反馈
:invalid 一加载就生效，而 :user-invalid 只在用户交互后才激活（如输入、失焦、回车），这才是“真实反馈”的起点。必须搭配 required，否则空值不会触发 :user-invalid：
立即学习“前端免费学习笔记（深入）”；
-
input:valid：只在通过当前pattern校验后生效（不是“强密码”才 valid，是“符合当前 pattern”就 valid） -
input:user-invalid：用户操作后未通过当前pattern，此时可叠加红底、图标等提示 - 想让“弱档”输入大写字母时立刻变“中档”？不行——
pattern是静态的，切换档位需 JS 更新input.pattern并调用input.checkValidity()
用属性选择器区分强度档位并联动样式
给每个强度档位的 input 加上语义化 data-strength 属性，再用属性选择器控制对应反馈区域：
<input type="password" required pattern="[a-z]{8,}" data-strength="weak">
<input type="password" required pattern="(?=.*[a-z])(?=.*[A-Z]).{8,}" data-strength="medium">
<input type="password" required pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-zA-Z\d]).{10,}" data-strength="strong">
<div class="strength-meter">
<span data-level="weak">弱</span>
<span data-level="medium">中</span>
<span data-level="strong">强</span>
</div>
CSS 写法示例：
input[data-strength="weak"]:user-invalid + .strength-meter [data-level="weak"] { opacity: 1; color: #e53e3e; }
input[data-strength="medium"]:valid + .strength-meter [data-level="medium"] { opacity: 1; color: #ed8936; }
input[data-strength="strong"]:valid + .strength-meter [data-level="strong"] { opacity: 1; color: #38a169; }
注意：这种兄弟选择器要求 input 和 .strength-meter 是相邻兄弟关系；若结构不满足，得用 :has()（Chrome/Firefox 支持，Safari 仍不稳定）。
为什么不能只靠 :valid/:invalid 实现分档？
因为 :valid 和 :invalid 是二元状态，不携带“强度等级”信息。一个密码可能同时满足“弱档”和“中档”的 pattern，但浏览器只会按当前绑定的 pattern 判定一次——它不会告诉你“你已经比弱档强了”。真正容易被忽略的是：CSS 伪类永远滞后于 JS 状态更新，哪怕你用 input.setCustomValidity('') 清除错误，:user-invalid 也不会立刻消失，要等下一次验证周期（比如再次失焦）。
