介绍

在验证前端输入字段的内容时，现在的事情比以前容易多了。我们可以使用:required、:optional、:valid和:invalid伪类与 HTML5 表单验证属性（如required或pattern）相结合，以创建非常具有视觉吸引力的结果。这些伪类适用于input、textarea和select元素。

输入伪类

这是工作中的伪类的示例。让我们从这个 HTML 标记开始：

<form action="#">
  <input type="text" placeholder="First Name" required>
  <input type="email" placeholder="Email" required>
  <input type="text" placeholder="Nickname">
  <input type="text" placeholder="Favorite pizza topping">
</form>

让我们应用以下样式：

input {
  border: 2px solid;
  border-radius: 4px;
  font-size: 1rem;
  margin: 0.25rem;
  min-width: 125px;
  padding: 0.5rem;
  transition: background-color 0.5s ease-out;
}
input:optional {
  border-color: gray;
}
input:required {
  border-color: black;
}
input:invalid {
  border-color: red;
}

结果如下：

在上面的演示中，<input type="email"是一个 HTML5 输入类型，它告诉浏览器需要一个电子邮件地址。因为我们也在使用该required属性，现代浏览器只会在输入有效电子邮件:valid时将输入设置为。

添加 :focus 伪类

让我们根据焦点状态设置样式，并根据有效性状态添加背景图像和颜色，并且仅当输入处于焦点时，让事情变得更加有趣。我们将使用相同的 HTML 标记。

这是我们更新的 CSS：

input {
  border: 2px solid;
  border-radius: 4px;
  font-size: 1rem;
  margin: 0.25rem;
  min-width: 125px;
  padding: 0.5rem;
  transition: border-color 0.5s ease-out;
}
input:optional {
  border-color: gray;
}
input:required:valid {
  border-color: green;
}
input:invalid {
  border-color: red;
}
input:required:focus:valid {
  background: url("https://assets.digitalocean.com/labs/icons/hand-thumbs-up.svg") no-repeat 95% 50% lightgreen;
  background-size: 25px;
}
input:focus:invalid {
  background: url("https://assets.digitalocean.com/labs/icons/exclamation-triangle-fill.svg") no-repeat 95% 50% lightsalmon;
  background-size: 25px;
}

上述 CSS 有两个关键变化：

1. input:required:valid仅对required输入应用成功状态。因为从技术上讲，optional输入总是有效的。
2. input:focus:valid' and 'input:focus:invalid 仅当它们被聚焦时才适用于输入。

结果如下：

您可能想在输入上使用::before或::after添加内容，但不幸的是，这在输入元素上是不可能的。一个技巧是拥有一个同级span元素，该元素根据输入的有效性添加内容。像这样的东西：

input:focus:invalid + span::before { ... }.