:user-invalid

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

:user-invalid 是一个 CSS 伪类,它在 CSS 选择器级别 4 工作草案 中被提议,用于根据用户输入的值在最终用户与表单进行交互之后,是否与 HTML 标记中指定的接受值相符,来选择表单元素。 实际上,:user-invalid 被称为“用户交互伪类”,因为它在识别选择元素的用户操作方面是独一无二的。

以下 HTML 标记示例展示了一个带有数字字段的基本表单。

<form>
  <label for="quantity"> Quantity:</label>
  <input id="quantity" max="10" min="0" type="number" value="11" />
  <!-- Rest of the form... -->
</form>

HTML 标记为输入设置的数字范围在 110 之间,但默认值被设置为 11。 这意味着表单加载时该值立即无效。

但是,:user-invalid 伪类只有在用户实际与表单交互(超出在字段中输入内容)后才会生效。 该交互是 :user-invalid:invalid 之间的区别。 同样的原理也适用于由 :in-range:out-of-range:required 设置的已输入表单值。

input:user-invalid {
  color: red;
}

以下图像展示了基于上述 HTML 示例的 :valid:user-invalid 之间的不同状态。

有效值(左)和用户在与表单交互后输入的无效值之间的区别。

这里令人困惑的是 :invalid:user-invalid 之间的紧密关系。 如果将两者一起使用,可能难以区分它们。

input:invalid {
  color: red;
}

input:user-invalid {
  color: red;
}
:invalid(中)和用户输入的无效值(右)之间的区别可能难以区分。

在实际使用场景中,使用其中一个或为两者设置不同的样式可能能提供更好的用户体验。

浏览器可以决定如何以及何时匹配元素

值得注意的是,当 :user-invalid 匹配 :invalid:out-of-range 或为空但 :required 的表单字段时,它是在“用户尝试提交表单与用户再次与表单元素交互之间的时间段内”完成的。 但是,规范留下了空间供浏览器自行决定 元素何时匹配。

用户代理可以允许它们在其他时间匹配此类元素,这将适合向用户突出显示错误。 例如,UA 可以选择让 :user-invalid 在用户在其中键入一些文本并将焦点更改为另一个元素后匹配 :invalid 元素,并在用户成功更正输入后停止匹配。

一旦确定用户输入的值为无效条目,我们就可以选择该元素。

浏览器支持

截至撰写本文时,只有 Firefox 支持,它在 Firefox 88 中实现了 :user-invalid。 Chromium 项目有一个 开放的错误单(给它加星!),以便在基于 Blink 的浏览器(即 Chrome 和 Edge)中实现它。 还有一个 开放的 WebKit 单,以便在 Safari 中添加支持。

查看 caniuse 了解最新的浏览器支持情况。

更多信息