:valid和:invalid是CSS中基于HTML5验证的伪类，可为正确或错误输入添加样式。示例中输入合法邮箱边框变绿，错误时变红。为避免页面加载即报错，可用:user-invalid、JavaScript控制校验时机或提交后启用样式。还可与:focus等组合，实现聚焦提示或显示对勾图标。合理使用能提升表单体验，关键在于匹配用户操作节奏。
在网页表单设计中，用户输入的正确性提示不仅能提升体验，还能减少提交错误。CSS 提供了 :valid 和 :invalid 伪类选择器，可以无需 JavaScript 就对表单元素的验证状态进行样式控制，让界面更直观。
什么是:valid和:invalid
这两个伪类基于 HTML5 内置的表单验证机制自动生效：
- :valid：匹配当前输入内容符合验证规则的表单元素，比如输入了正确的邮箱格式。
- :invalid：匹配输入内容不符合要求的元素，例如必填字段为空或邮箱格式错误。
它们依赖于元素的 required、type="email"、pattern 等属性来判断有效性。
基本使用示例
以下是一个简单的注册表单样式设置：
立即学习“前端免费学习笔记（深入）”；
input:valid {
border: 2px solid #4CAF50;
background-color: #f8fff8;
}
input:invalid {
border: 2px solid #f44336;
background-color: #fff8f8;
}
当用户输入合法邮箱时边框变绿，格式错误或为空时变红，视觉反馈即时明确。
避免页面加载即报错
刚打开页面时，空的必填字段会立即触发 :invalid 样式，影响美观。可以通过以下方式优化：
- 结合 :user-invalid（部分浏览器支持）只在用户交互后显示错误样式。
- 使用 JavaScript 在用户离开输入框（blur）或输入时再添加校验类。
- 初始状态下不应用边框颜色，提交后再启用全局验证样式。
与其他伪类配合使用
这些伪类可与其他状态组合，实现更精细的控制：
input:invalid:focus {
outline: 2px solid #f44336;
opacity: 0.8;
}
input:valid + .check-icon::after {
content: "✓";
color: green;
}
比如在聚焦无效输入时加强提示，或在有效输入后显示对勾图标。
基本上就这些。合理使用 :valid 和 :invalid 能让表单更友好，关键是配合用户体验节奏，别一上来就吓到用户。
