怎样用CSS伪类:user-invalid实现失焦后才触发的错误提示？-css教程-PHP中文网

:user-invalid默认一输入就高亮，因其仅依赖input.checkValidity()返回false，不区分用户是否完成交互；须配合JS添加user-touched类并在失焦后通过input.user-touched:not(:user-valid)触发样式。

怎样用css伪类:user-invalid实现失焦后才触发的错误提示？

为什么 `:user-invalid` 默认一输入就高亮？

:user-invalid 是 CSS Level 4 提案中的伪类，浏览器（目前仅 Chrome 126+、Edge 126+ 支持）会根据表单控件的 validity.valid 状态自动匹配。但问题在于：它不区分「实时校验」和「用户交互意图」——只要 input.checkValidity() 返回 false，哪怕用户刚敲第一个字母，:user-invalid 就立刻生效。

失焦后才触发的关键：用 `:not(:user-valid)` + `:focus-within` 配合 JS 控制 class

纯 CSS 没法让 :user-invalid “延迟生效”，必须借助 JS 标记用户是否已离开过该字段。常见做法是监听 blur 事件，给元素添加一个标记类（如 user-touched），再用 CSS 组合选择器控制样式：

初始状态：不显示错误样式，即使值非法
用户首次失焦后：input.user-touched:not(:user-valid) 才触发红框/提示
后续聚焦再失焦，仍保持该逻辑

示例代码：

<input type="email" required id="email"><span class="error-message">请输入有效邮箱</span>

input.user-touched:not(:user-valid) {
  border-color: #e53e3e;
}
.error-message {
  display: none;
}
input.user-touched:not(:user-valid) + .error-message {
  display: block;
}

const emailInput = document.getElementById('email');
emailInput.addEventListener('blur', () => {
  if (!emailInput.classList.contains('user-touched')) {
    emailInput.classList.add('user-touched');
  }
});

`:user-invalid` 和 `:invalid` 的实际差异在哪？

二者都反映校验失败，但触发时机和兼容性完全不同：

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

:invalid 是 CSS Level 3 标准，所有现代浏览器支持；但它会在页面加载后立即匹配非法值（比如空的必填项），无法区分用户是否操作过
:user-invalid 是 Level 4 提案，语义上更贴近“用户导致的无效”，但当前实现仍是基于 validity 状态，**并未内置“用户交互后才启用”的逻辑**
Chrome 中两者行为几乎一致；Firefox 和 Safari 目前完全不支持 :user-invalid
若需跨浏览器稳定控制“失焦后提示”，:invalid + JS user-touched 方案反而更可靠

容易被忽略的边界情况

失焦触发错误提示不是加个 blur 就完事，几个真实项目中踩过的坑：

用户快速切换字段（Tab 或鼠标点选），blur 可能还没执行完，新字段就 focus 了——建议用 setTimeout(..., 0) 延迟 class 添加，避免样式闪烁
通过 JS 设置 input.value 后未手动调用 input.reportValidity()，会导致 :user-valid 状态滞后
自定义校验（setCustomValidity）后，必须调用 checkValidity() 才会更新伪类匹配，否则 :user-invalid 不响应
如果表单有 novalidate，所有基于 validity 的伪类都会失效，包括 :user-invalid