:user-valid 和 :user-invalid 伪类

:user-valid

浏览器支持

  • 119
  • 119
  • 88
  • 16.5

来源

:user-invalid

浏览器支持

  • 119
  • 119
  • 88
  • 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 启用的用户体验需要编写额外的有状态代码。该代码需要跟踪初始值、输入的当前焦点状态、用户对该值的更改程度，运行额外的有效性检查，并最终添加一个用于选择样式的类。您现在可以依靠浏览器自动处理所有这些操作。

更多资源

封面照片：Behzad Ghaffarian 在 Unsplash 用户。