如何用CSS校验必填表单项的合法性_使用:required与:invalid伪类

精准锁定“该填未填”：深入解析 :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）