在网页开发中，表单验证是确保用户输入正确数据的重要环节。:valid 和 :invalid 是 CSS 提供的伪类选择器，能够根据表单元素是否通过 HTML5 内置验证规则，动态应用不同的样式。这种方式无需 JavaScript 就能实现基础的视觉反馈，提升用户体验。
基本概念与使用条件
这两个伪类依赖于 HTML 表单元素的校验状态：
- :valid：当元素的输入值符合其约束条件时生效，例如邮箱格式正确、必填项已填写等。
- :invalid：当输入值不满足约束时触发，比如输入了非法邮箱或留空必填字段。
注意：这些样式通常在页面加载后立即应用。为了避免刚打开页面就显示错误样式，建议结合 :user-invalid（部分浏览器支持）或通过 JavaScript 控制时机。
常见应用场景与样式设置
可以为输入框添加颜色边框、背景色或图标来提示状态：
立即学习“前端免费学习笔记（深入）”；
input:valid {
border-color: green;
background-color: #f0fff0;
}
input:invalid {
border-color: red;
background-color: #fff0f0;
}
对于更复杂的字段类型，如邮箱和数字输入，HTML 的 type 属性会自动参与验证：
避免初始错误提示干扰
页面刚加载时，未填写的必填字段会被标记为 :invalid，可能导致红框满屏的问题。可以通过以下方式优化：
- 使用 :user-invalid 替代 :invalid（现代浏览器支持）——仅在用户与元素交互后才生效。
- 结合:focus-within 或 JS，在用户开始输入后再启用验证样式。
- 用 :not(:placeholder-shown) 技巧延迟显示错误样式：
input:invalid:not(:placeholder-shown) {
border-color: red;
}
这样只有当用户输入内容又被删除或格式错误时，才会触发红色边框。
与其他状态组合使用
可将 :valid 和 :invalid 与其他伪类结合，实现更精细的控制：
- input:focus:valid { box-shadow: 0 0 5px rgba(0,128,0,.3); }
- textarea:invalid { background-image: url(warning-icon.png); }
这种组合能让用户在聚焦输入框时获得更清晰的反馈。
基本上就这些。合理使用 :valid 与 :invalid 能让表单更具交互性，关键是在提供反馈的同时避免过早打扰用户。
