HTML 强密码校验怎么通过多规则实时点亮提示图标-H5教程-PHP中文网

用 css ::has(input:valid) 可实现无 js 的实时密码强度校验：将强密码拆分为长度、大写字母、数字、特殊字符四条独立规则，每条对应一个隐藏 input 并设 pattern，通过 :has() 控制图标显隐，主密码框用轻量 js 同步值，兼容性不足时可降级为 js 切换 class。

html 强密码校验怎么通过多规则实时点亮提示图标

用 CSS 伪类 ::has(input:valid) 配合多条独立校验规则，就能在用户输入过程中实时点亮对应提示图标——不用写一行 JavaScript 监听事件。

拆解密码规则为独立可测的 CSS 选择器

把“强密码”拆成几条互不干扰的子规则，每条规则对应一个带 pattern 的隐藏 input（或复用 visible input），再用 CSS 判断其是否 valid。例如：

长度 ≥ 8 位 → <input type="password" pattern=".{8,}" id="pwd-len">
含大写字母 → <input type="password" pattern=".*[A-Z].*" id="pwd-upper">
含数字 → <input type="password" pattern=".*[0-9].*" id="pwd-digit">
含特殊字符 → <input type="password" pattern=".*[!@#$%^&*()_+\-=\[\]{};':">\/?].*" id="pwd-spec">

这些 input 全部设为 hidden 或 position: absolute; left: -9999px，不影响布局，但参与表单验证逻辑。

用 ::has 精准控制每个图标的显隐

每个提示图标（比如 SVG 或 span）放在对应规则的容器里，用 ::has(input:valid) 控制状态。例如：

  ✓
  至少 8 位

CSS 写法：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

.rule-item .icon-check { opacity: 0.4; }
.rule-item:has(#pwd-len:valid) .icon-check { opacity: 1; color: #2ecc71; }

每条规则独立生效，用户输对某一项，对应图标立刻变亮，无需 JS 判断组合逻辑。

主密码框同步触发所有隐藏校验

让所有隐藏 input 的 value 始终和主密码框保持一致。只需一段轻量 JS：

const mainPwd = document.getElementById('password');
const pwdInputs = document.querySelectorAll('[id^="pwd-"]');
mainPwd.addEventListener('input', () => {
pwdInputs.forEach(el => el.value = mainPwd.value);
});

这样所有 pattern 校验会随输入自动重跑，::has 也随之更新，视觉反馈完全实时、解耦、可维护。