浏览器原生:valid与:invalid伪类仅在表单控件含验证属性（如required、type="email"）且用户已交互/提交后生效；初始空值常被误判为:valid，推荐用:user-invalid或input:invalid:not(:placeholder-shown)排除干扰。
表单验证状态怎么用 :valid 和 :invalid 捕获
浏览器原生支持的 :valid 与 :invalid 伪类，只在元素有 required、type="email" 等验证属性且通过/失败时才触发。它们不依赖 JavaScript，但有个关键前提：表单控件必须处于「已交互过」或「提交过」状态，否则初始渲染时多数浏览器（Chrome/Firefox）会把空 input[type="email"] 当作 :valid —— 这和直觉相反。
解决办法是加 :user-invalid（Chrome 102+、Firefox 119+ 支持），它只在用户输入后验证失败才生效；或者退而求其次，用 :not(:placeholder-shown) 配合 :invalid 来排除初始空值干扰：
input:invalid:not(:placeholder-shown) {
border-color: #e53e3e;
}
-
:user-invalid更语义准确，但需检查目标浏览器兼容性 - 别只靠
:invalid做初始错误提示，否则空邮箱框一加载就红边，体验很差 -
textarea和select同样适用这些伪类，但select的:invalid触发条件较弱（仅当设了required且未选中有效option[value]）
SCSS 中怎么封装验证状态样式避免重复写
直接在每个表单控件上写 :valid/:invalid 样式容易散落、难维护。推荐用 SCSS 的 @at-root + 选择器插值，把状态样式收拢到变量控制的模块里：
$form-validation-states: (
valid: (
border-color: #38a169,
icon: "✓"
),
invalid: (
border-color: #e53e3e,
icon: "✕"
)
);
@each $state, $config in $form-validation-states {
@at-root input:#{$state},
input:#{$state}:focus,
textarea:#{$state},
select:#{$state} {
border-color: map-get($config, border-color);
&::after {
content: map-get($config, icon);
// …图标定位逻辑
}
}
}
- 注意
@at-root是为了生成顶层 CSS 选择器，否则嵌套后变成input:valid被包裹在父选择器下，无法匹配 - 不要在
:valid样式里改display或visibility，会导致表单控件重排异常；优先用border、outline、::before/::after做轻量反馈 - 如果项目用了
label包裹input，可以加label:has(input:invalid)（需确认目标环境支持:has()）来高亮整个标签区域
:focus-within 怎么配合验证状态做焦点反馈
单独用 :focus 只能控制当前控件，但表单常需要「输入框获得焦点时，让旁边的错误提示文字淡入」或「整个表单项边框高亮」。这时 :focus-within 就很实用——它作用于包含聚焦子元素的父容器：
立即学习“前端免费学习笔记（深入）”；
.form-field {
transition: border-color 0.2s;
&:focus-within {
border-color: #3182ce;
}
&.has-error :is(input:invalid, textarea:invalid) {
border-color: #e53e3e;
}
}
-
:focus-within兼容性良好（IE 不支持，但现代项目基本可忽略） - 别把它和
:valid/:invalid混用在同一选择器里，比如input:focus-within:invalid是无效的——:focus-within是父级伪类，不能链在子元素上 - 若需在焦点状态下强化错误反馈，建议用 JS 添加临时 class（如
input.is-touched），再用 SCSS 写&.is-touched:invalid，比纯 CSS 方案更可控
为什么 :required 和 :optional 很少用于验证反馈
:required 只表示该字段有 required 属性，并不反映当前是否通过验证；它甚至对 type="number" 输入非数字时也保持匹配。换句话说，它是静态声明，不是运行时状态。
所以你几乎不会看到真实项目用 input:required:invalid 做核心反馈逻辑——因为 :required 在这里多余，且误导（比如一个非必填邮箱框，输错时也需要红边提示）。
- 真正要捕获的是「值是否合规」，而不是「有没有 required 属性」
-
:optional更冷门，通常只用来统一降级某些非必填字段的样式（如去掉星号），和验证反馈无关 - 如果后端返回了字段级验证规则（如「手机号必须 11 位」），纯 CSS 无能为力，必须结合 JS 设置自定义 class（如
input[data-rule="phone"]:invalid）
伪类状态选择器省事，但边界很清晰：它只响应 HTML5 原生验证逻辑。超出这个范围的业务规则，SCSS 再灵活也得靠 JS 补位。
