17370845950

:valid 和 :invalid 伪类不执行校验，仅响应 HTML 原生验证状态；依赖 required、type、pattern、min/max 等属性触发，适用于视觉反馈，不能替代 JavaScript 校验。

CSS 中的 :valid 和 :invalid 伪类，本身**不执行校验逻辑**，而是依赖 HTML 表单元素的原生验证状态来响应样式变化。也就是说，它们只是“观察者”，真正决定是否合法的是 HTML 的 required、type（如 email、url、number）、pattern、min/max 等约束属性。

确保表单控件启用原生验证

只有设置了验证相关属性的表单元素，:valid 和 :invalid 才会生效：

• 必填项：添加 required 属性，空值即为 :invalid
• 类型校验：使用 type="email"、type="url"、type="number" 等，浏览器会自动按格式判断
• 自定义模式：用 pattern 配合正则，例如 pattern="[0-9]{6}" 限制 6 位数字
• 数值范围：对 input[type="number"] 设置 min="1"、max="100"

:valid 与 :invalid 的触发时机

这两个伪类在以下情况动态切换：

• 页面加载时，若字段有值且符合所有约束 → 初始为 :valid；若为空且 required → 初始为 :invalid
• 用户输入过程中，浏览器实时重新评估（部分浏览器有防抖，不会每键触发）
• 提交表单时，所有字段强制验证，未通过的立即变为 :invalid
• 注意：未聚焦的空 required 字段，在 Chrome/Firefox 中默认是 :invalid，但 Safari 可能延迟到首次交互后才激活

实用样式建议

用视觉反馈帮助用户识别状态，但避免仅靠颜色（考虑色觉障碍）：

• 给 :invalid 添加红色边框 + 叹号图标（配合 ::after）
• 给 :valid 添加绿色边框或对勾图标
• 配合 :focus:invalid 在聚焦时强化错误提示
• 慎用 :invalid:not(:placeholder-shown) 区分“空必填”和“填错”，提升体验

不能替代 JavaScript 校验

CSS 伪类无法：

• 访问具体错误信息（比如“邮箱格式不对”还是“域名不存在”）
• 触发自定义逻辑（如异步验证、防重复提交）
• 兼容所有场景（如动态禁用/启用验证、复杂联动校验）
• 因此，:valid/:invalid 适合轻量级视觉反馈，业务级校验仍需 JS 配合 checkValidity() 和 setCustomValidity()