使用CSS的:valid和:invalid伪类可基于HTML5验证属性实现表单实时校验样式反馈，通过结合required、type、pattern等属性，配合:not(:placeholder-shown)避免初始标红，提升用户体验。
使用 CSS 的 :valid 和 :invalid 伪类，可以在不写 JavaScript 的情况下对表单输入进行基本的实时校验，并通过样式反馈给用户。这种方式依赖于 HTML5 的表单验证属性（如 required、type、pattern 等），结合 CSS 实现视觉提示。
1. 基本语法与作用
:valid 匹配当前输入内容符合校验规则的表单元素。
:invalid 匹配当前输入不符合规则的元素。
这些伪类适用于 、、 等表单控件，前提是它们设置了约束条件。
示例：
input:valid {
border-color: green;
outline: 2px solid #b0e0b0;
}
input:invalid {
border-color: red;
outline: 2px solid #fbb;
}2. 结合 HTML 校验属性使用
要让 :valid/:invalid 生效，必须在 HTML 中设置有效的约束。常见的包括：
-
required：字段不能为空 -
type="email"：必须为合法邮箱格式 -
type="url"：必须为合法 URL -
min/max：数值或日期范围 -
pattern：自定义正则表达式匹配
HTML 示例：
对应 CSS：
input:invalid {
background-color: #fff0f0;
border: 1px solid #ff4d4d;
}
input
:valid {
background-color: #f0fff0;
border: 1px solid #4caf50;
}
:valid {
background-color: #f0fff0;
border: 1px solid #4caf50;
}3. 避免页面加载时立即标红
如果用户还没开始输入，所有必填字段默认是 :invalid，会立刻显示错误样式，影响体验。
可以通过以下方式延迟提示：
- 只在用户离开输入框后（失去焦点）才应用样式
- 利用
:user-invalid（实验性，支持有限） - 结合
:focus控制样式触发时机
推荐做法：
/* 只有当用户输入过且无效时才标红 */
input:invalid:not(:placeholder-shown) {
border-color: red;
box-shadow: 0 0 5px rgba(255, 0, 0, 0.1);
}
/* 或者：失去焦点后再显示错误 */
input:focus:invalid {
/* 可选：聚焦时也提示 */
}
input:out-of-range {
border-color: orange;
}4. 扩展样式提升用户体验
除了边框颜色，还可以添加图标、提示文字或动画增强反馈。
例如添加小图标： ```css input:valid { background-image: url('check.svg'); background-repeat: no-repeat; background-position: right 8px center; padding-right: 30px; }input:invalid { background-image: url('warning.svg'); background-repeat: no-repeat; background-position: right 8px center; padding-right: 30px; }
注意：若已设置
基本上就这些。合理使用 :valid 和 :invalid 能快速实现基础表单反馈，适合简单场景。复杂逻辑仍建议配合 JavaScript 使用。background，需调整以免覆盖。
