:user-valid 和 :user-invalid 伪类

:user-valid

浏览器支持

  • Chrome：119.
  • Edge：119.
  • Firefox：88.
  • Safari：16.5。

来源

:user-invalid

浏览器支持

  • Chrome：119.
  • Edge：119.
  • Firefox：88.
  • Safari：16.5。

来源

用户输入是任何界面中最敏感的问题之一。易用的应用必须帮助用户查看、理解和修正输入中的任何错误。:user-valid 和 :user-invalid 伪类选择器会在用户更改输入内容后才提供有关错误的反馈，从而改善输入验证的用户体验。有了这些新的选择器，您无需再编写有状态代码来跟踪用户更改的输入。

用户互动伪类选择器

:user-valid 和 :user-invalid 伪类选择器类似于现有的 :valid 和 :invalid 伪类。这两种方法都是根据表单控件的当前值是否满足其验证约束条件来匹配表单控件。不过，新 :user-valid 和 :user-invalid 伪类的优势在于，只有在用户与输入内容进行了显著互动后，它们才会与表单控件匹配。

必填且为空的表单控件将与 :invalid 匹配，即使用户尚未开始与网页互动也是如此。不过，除非用户更改输入并将其留在无效状态，否则同一表单控件将与 :user-invalid 不匹配。

使用 :user-valid 和 :user-invalid 伪类

使用这些伪类为输入、选择和文本区域控件设置样式，如以下示例所示：

input:user-valid,
select:user-valid,
textarea:user-valid {
  border-color: green;
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: red;
}

<input required="required" />

<select required="required">
  <option value="">Choose an option</option>
  <option value="1">One</option>
</select>

<textarea required="required"></textarea>

一张图片，其中并排显示了 3 张屏幕截图以供比较。每个屏幕截图都显示了一个包含相同输入、选择和文本区域控件的网络表单。第一个屏幕截图显示了表单在没有任何用户输入时的初始状态。控件边框呈灰色，下方的帮助文本说明每个控件目前都与 :invalid 伪类选择器匹配。第二张屏幕截图显示了用户为每个控件提供输入后，同一表单的显示效果。控件边框为绿色，下方的帮助文本说明每个控件目前都与 :valid 和 :user-valid 伪类选择器匹配。第三张也是最后一张屏幕截图显示了用户移除所有输入内容后的同一表单。控件边框呈红色，下方的帮助文本说明每个控件目前都与 :invalid 和 :user-invalid 伪类选择器匹配。

选择器会根据用户互动和验证约束条件的组合进行匹配。请与以下演示互动，了解这些功能的实际运作方式：

使用更少的代码提供更好的用户体验

如果没有这些伪类，实现 :user-valid 和 :user-invalid 提供的用户体验就需要编写额外的有状态代码。该代码需要跟踪初始值、输入框的当前焦点状态、用户对值所做的更改程度，运行额外的有效性检查，最后添加一个类以选择样式。现在，您可以依靠浏览器自动处理所有这些操作。

更多资源

封面照片：Unsplash 用户 Behzad Ghaffarian 提供。