pattern属性不能直接触发密码强度提示，因其仅在提交或失焦时校验，不监听输入过程；现代浏览器需配合required和:user-invalid伪类，并依赖按键后的交互式验证才能实现有限的实时反馈。
pattern属性为什么不能直接触发密码强度提示
pattern 是 HTML 表单的原生验证属性，只在表单提交时校验，且不提供中间状态反馈。它不会监听输入过程，也不会主动触发 :valid 或 :invalid 伪类的实时切换——除非用户手动触发了浏览器的验证（比如 blur 或 submit）。所以单纯靠 pattern + :valid 实现“边输边提示”是不可行的。
真正起作用的是 input 元素的 validity 状态 + :user-invalid（或 :valid）伪类，而它们的更新依赖于浏览器是否已对当前输入执行过验证检查。现代浏览器（Chrome 100+、Firefox 105+、Safari 16.4+）在用户输入后会自动对带 pattern 的 input 做“用户交互式验证”，从而让 :user-invalid 可被 CSS 捕获。
- 必须配合
required属性，否则空值不触发:user-invalid -
pattern正则不能以^和$开头结尾（浏览器会自动包裹），否则可能匹配失败 - 正则中避免使用贪婪量词（如
.*）导致意外全匹配，建议用[a-z]{8,}这类明确范围写法
:user-invalid 和 :valid 伪类的实际触发时机
这两个伪类不是“输入即更新”，而是“验证后才生效”。浏览器会在以下任一情况后重新评估并更新伪类：
- 用户离开输入框（
blur） - 用户按下 Enter 提交表单
- 脚本调用
input.checkValidity()或form.reportValidity() - 现代浏览器还会在每次按键后做轻量级验证（仅限带
pattern+required的input）
这意味着：如果你只写 input:valid { background: #e8f5e9; }，在用户刚输入一个字符时，样式大概率不会立刻出现——要等浏览器完成一次验证周期。想更灵敏，得搭配 input 事件监听 + 动态 class 控制，但那就脱离纯 CSS 方案了。
立即学习“前端免费学习笔记（深入）”；
用 CSS 伪类实现分档强度提示的可行写法
纯 CSS 无法读取密码字符串内容，所以不能做“含大小写字母+数字+符号=强”这种逻辑判断。但可以借助多个 pattern 配合不同 id 或 name，再用相邻兄弟选择器或属性选择器模拟分档效果——实际更常用的是“多层 pattern 回退”策略：
<input type="password"
required
pattern="(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="至少8位，含大小写字母">
<span class="strength-indicator"></span>然后用如下 CSS 匹配不同强度层级（注意顺序必须从强到弱）：
input:valid + .strength-indicator { background: #4caf50; } /* 强 */
input:valid:not(:user-invalid) + .strength-indicator { background: #ff9800; } /* 中（需配合 JS 动态加 class）*/
/* 纯 CSS 无法区分中/弱，所以实际项目中建议： */
/* 保留 pattern 做基础校验，用 JS 监听 input 事件计算强度，再加 data-strength="weak|medium|strong" */-
:user-invalid在 Chrome/Firefox 中比:invalid更可靠，推荐优先使用 - 不要依赖
:placeholder-shown判断空状态，它和pattern验证无直接关联 - 移动端 Safari 对
:user-invalid支持较晚（iOS 16.4+），旧版本需降级为 JS 方案
容易被忽略的兼容性与可访问性问题
视觉提示只是辅助，不能替代明确的文字反馈。屏幕阅读器不会读取 :valid 的背景色变化，也不会把伪类状态转成语义信息。
- 必须为每个强度等级提供对应的
aria-live区域，例如：<div aria-live="polite" class="strength-text">密码强度：弱</div> - 不要仅用颜色区分强度（比如红/黄/绿），要叠加图标或文字（✅ / ⚠️ / ❌）
-
pattern正则中的中文提示（title属性）在部分安卓 WebView 中不显示，应额外用aria-describedby关联说明文本 - 如果用了
inputmode="text"（为密码键盘优化），某些 Android 浏览器会禁用pattern验证，需测试确认
真正稳定的方案永远是：JS 计算强度 + setCustomValidity 控制验证结果 + CSS 响应自定义 validity 状态。纯 CSS 伪类只能作为轻量 fallback 或视觉增强层，别把它当主逻辑。
