表单验证可通过CSS的:valid和:invalid伪类实现无需JavaScript的实时样式反馈，结合required、type、pattern等HTML属性，为输入框添加边框色、背景图标等视觉提示，并推荐使用:user-invalid避免初始错误干扰，提升用户体验。
在网页开发中，表单验证是确保用户输入正确信息的重要环节。CSS 提供了 :valid 和 :invalid 伪类，可以无需 JavaScript 就实现基本的实时样式反馈，提升用户体验。
理解 :valid 和 :invalid 伪类
这两个伪类会根据表单元素的内容是否符合其约束条件自动生效：
- :valid：当输入内容满足 HTML5 验证规则（如 type、required、pattern 等）时生效
- :invalid：当输入内容不满足验证规则时生效（页面刚加载未输入时通常也会触发）
它们适用于所有可输入的表单控件，例如 input、textarea 和 select。
常见使用场景与样式设置
通过为不同状态设置视觉样式，可以让用户快速识别输入是否正确。
立即学习“前端免费学习笔记（深入）”；
例如，给输入框添加边框颜色提示：
input:valid {
border-color: green;
outline: 2px solid transparent;
}
<p>input:invalid {
border-color: red;
outline: 2px solid #f88;
}</p>也可以配合背景色或图标增强提示效果：
input:valid {
background-image: url('check-icon.png');
background-position: right 10px center;
background-repeat: no-repeat;
}
<p>input:invalid {
background-image: url('warning-icon.png');
background-position: right 10px center;
background-repeat: no-repeat;
}</p>避免初始错误干扰体验
页面刚加载时，空的必填字段会被视为无效，直接显示红色可能让用户困惑。可以通过以下方式优化：
- 只对用户操作过的字段应用样式，使用 :focus 或 :user-invalid（现代浏览器支持）
- 示例：仅在失去焦点后才显示错误
input:focus:invalid { border-color: red; } <p>/<em> 更推荐的方式：使用 :user-invalid </em>/ input:user-invalid { border-color: red; box-shadow: 0 0 4px #f88; }</p>:user-invalid 是一个新的 CSS 伪类，只有在用户与元素交互后（如输入或离开），且内容无效时才会匹配，能有效避免初始误报。
结合 required 和 pattern 实现精准控制
这些伪类依赖 HTML 的语义化属性。合理使用属性才能发挥效果：
HTML 示例：
<input type="email" required placeholder="请输入邮箱"> <input type="text" pattern="[0-9]{6}" placeholder="请输入6位数字验证码">这些输入框会自动受到 :valid/:invalid 控制。
基本上就这些。合理使用 :valid 和 :invalid 能让表单更直观，关键是结合语义化 HTML 和适度的视觉反馈，避免过度设计影响可用性。
