精准锁定“该填未填”：深入解析 :required:invalid 伪类组合
在前端表单验证的世界里，样式与逻辑的精准同步是个经典难题。你或许遇到过这样的困惑：明明给必填项标了红，却总在用户还没开始输入时就“误报”，或者某些非必填项因为格式问题也“无辜躺枪”。
问题的核心，往往在于对CSS验证伪类的理解不够透彻。来看一个关键的组合：
:required:invalid是唯一能精准标识“必填但未填”状态的伪类组合，因:required仅声明必填属性，:invalid仅表示值违规，二者交集才锁定“该填未填且被浏览器判定无效”的情形。
简单来说，:required 和 :invalid 是两个独立但常配合使用的伪类，不能单靠其中一个实现“必填且未填”的精准样式控制；必须组合成 input:required:invalid 才能真正标出「该填却没填」的项。
为什么 :required:invalid 才是关键组合
这得从两个伪类的职责说起。:required 只表示「这个字段被声明为必填」，它不关心值是否为空或合法；:invalid 表示「当前值违反了至少一条验证规则」，但它可能因字段无 required、type 或 pattern 而根本不触发。只有两者交集，才能锁定「本该填、还没填、浏览器已判定无效」的状态。
- 空的
在页面加载后立即匹配:required:invalid（Chrome/Firefox/Safari 15.4+ 均支持） - 若只写
input:invalid，而元素没加required或其他验证属性，样式完全不会生效 select:required:invalid需确保默认没有value（如），否则即使未选也会被当作有效
:invalid 触发时机与常见误判
这里有个常见的误解：:invalid 不是“用户删空才触发”，而是只要值不满足约束就匹配——比如 type="email" 输入 a@，或 pattern="^1[3-9]\d{9}$" 输入 123，都会立刻进入 :invalid 状态，哪怕字段非必填。
- 空值 +
required：加载即:invalid，无需用户交互 - 非空但格式错（如
type="number"输入abc）：输入瞬间就:invalid - 想延迟到用户失焦后再标红？改用
:user-invalid（Chrome 107+ / Safari 16.4+ / Firefox 124+ 支持），但注意它不回溯初始空值状态 textarea和select[multiple]同样适用，但普通select必须配required+ 无值默认项
样式冲突和浏览器兼容性陷阱
理论通了，实践起来却可能“踩坑”。写 input:required:invalid { border-color: red; } 很容易被框架 CSS 或重置样式覆盖，尤其当用了 Bootstrap、Ant Design 等自带表单样式的库。
立即学习“前端免费学习笔记（深入）”；
- 优先级不够？在选择器末尾加
!important是临时解法，更稳妥的是提升 specificity，比如form input:required:invalid或.my-form input:required:invalid - Safari 15.3 及更早版本对
:invalid的background和box-shadow支持不稳定，border-color最可靠 - 自定义组件（如封装的
:invalid完全不生效，必须靠 JS 注入is-invalid类 - 隐藏字段（
type="hidden"）或display: none元素，浏览器跳过验证，:invalid不会匹配
别忽略 :user-invalid 与 JS 的协同成本
最后，聊聊更复杂的场景。如果项目里混用 JS 校验（比如调用 setCustomValidity()）和原生 :invalid，视觉状态极易和 JS 内部 validity 状态脱节——比如 JS 清除了错误但用户还没失焦，:invalid 样式还挂着。
- 统一用 JS 控制：移除所有
required/pattern，改用reportValidity()+ 监听invalid事件并preventDefault()，再手动切is-invalid类 - 保留原生校验时，务必在 JS 中同步更新：监听
input和blur，根据element.validity.valid主动增删类，避免依赖伪类自动切换 :user-invalid虽能规避初始空值干扰，但它本身是实验性特性，旧版浏览器 fallback 方案必须存在（比如降级为:invalid）
