: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 -
red">注意：未聚焦的空
required字段，在 Chrome/Firefox 中默认是:invalid，但 Safari 可能延迟到首次交互后才激活
实用样式建议
用视觉反馈帮助用户识别状态，但避免仅靠颜色（考虑色觉障碍）：
立即学习“前端免费学习笔记（深入）”；
- 给
:invalid添加红色边框 + 叹号图标（配合::after） - 给
:valid添加绿色边框或对勾图标 - 配合
:focus:invalid在聚焦时强化错误提示 - 慎用
:invalid:not(:placeholder-shown)区分“空必填”和“填错”，提升体验
不能替代 JavaScript 校验
CSS 伪类无法：
- 访问具体错误信息（比如“邮箱格式不对”还是“域名不存在”）
- 触发自定义逻辑（如异步验证、防重复提交）
- 兼容所有场景（如动态禁用/启用验证、复杂联动校验）
- 因此，
:valid/:invalid适合轻量级视觉反馈，业务级校验仍需 JS 配合checkValidity()和setCustomValidity()
