如何确保CSS中:valid和:invalid样式在表单校验中有效应用？

本文共计639个文字，预计阅读时间需要3分钟。

最常见原因是表单控件未启用原生验证——它们只对带required、type等属性有效。

必须设置验证属性才能触发状态切换

没有验证约束，:valid 始终为 true（初始状态），:invalid 永远不匹配。要让样式动态响应，至少得加一个验证条件：

• required：非空校验（最轻量）
• type="email"、type="url"、type="number"：类型校验
• pattern：正则匹配（如 pattern="[0-9]{6}"）
• min/max（配合 type="number" 或 "date"）

例如：<input type="email" required> 才会让输入非法邮箱时激活 :invalid。

用户未交互前样式可能不更新

多数浏览器采用“懒校验”策略：初始加载时元素默认为 :valid，直到用户聚焦（:focus）再失焦（:blur），或提交表单（submit）时才首次计算状态。这意味着：

立即学习“前端免费学习笔记（深入）”；

• 刚打开页面时，即使输入了错误邮箱，:invalid 也不会立即生效
• 用 JavaScript 调用 input.checkValidity() 可强制触发，但不会自动刷新 CSS 状态
• 若需实时反馈，得监听 input 或 blur 事件 + 手动增删类名，不能只靠伪类

注意 disabled 和 readonly 的干扰

被禁用的表单控件（disabled）会跳过验证逻辑，:valid/:invalid 都不匹配；readonly 则仍参与校验，但内容不可编辑。另外：

• 自定义组件（如封装的 Input）若用 div + span 模拟输入框，原生伪类完全无效
• Shadow DOM 内部需在影子根中单独写样式，外部 :valid 无法穿透
• 某些旧版 Safari 对 pattern 的支持不一致，建议搭配 title 提示增强兼容性

真正起作用的永远是原生 input、select、textarea 元素本身，且必须有可执行的验证逻辑和用户交互时机。