入门 CSS 表单组验证

在网页开发过程中，表单验证是非常重要的一环。正确的表单验证可以保障用户输入的数据的合法性，防止恶意攻击，提升用户体验。本篇文章将介绍如何入门 CSS 表单组验证。

HTML 表单

在介绍 CSS 表单验证之前，我们先来了解一下 HTML 表单。HTML 表单是用户与网站交互的重要渠道，既可以收集用户输入的信息，又可以向用户呈现数据。HTML 表单主要由以下元素组成：

• <form>：表单的容器标签，用于包含表单的全部内容；
• <input>：表单的输入标签，用于收集用户输入的数据；
• <label>：表单的标签标签，用于说明该表单项的含义；
• <submit>：表单的提交标签，用于提交表单数据。

<form>
  <label for="username"> Username </label>
  <input type="text" id="username" name="username">
  
  <label for="password"> Password </label>
  <input type="password" id="password" name="password">
  
  <input type="submit" value="Submit">
</form>

CSS 表单验证

CSS 提供了一些伪类选择器，可以在输入框的焦点状态下应用样式。结合这些伪类选择器和 CSS3 属性，我们可以实现表单的验证效果。

:valid 和 :invalid

在 HTML5 中，浏览器支持了对表单元素的默认验证。当输入框的内容符合表单元素的 type 属性所规定的格式时，输入框将被标记为 :valid 状态；否则，输入框将被标记为 :invalid 状态。我们可以利用这两个伪类选择器对输入框应用不同的样式。

input[type="text"]:valid {
  border: 2px solid green;
}

input[type="text"]:invalid {
  border: 2px solid red;
}

:focus 和 :blur

除了验证输入框的内容是否符合格式，我们还需要在用户输入数据时给予即时反馈。在输入框获得焦点时，我们可以提示用户该输入框的要求；而在输入框失去焦点时，我们可以验证输入框的内容是否符合要求，并给予相应提示。

input[type="text"] {
  outline: none;
  border: 2px solid #ccc;
}

input[type="text"]:valid {
  border: 2px solid green;
}

input[type="text"]:invalid {
  border: 2px solid red;
}

input[type="text"]:focus + label {
  color: #0099ff;
}

input[type="text"]:valid + label {
  color: green;
}

input[type="text"]:invalid + label {
  color: red;
}

在上面的 CSS 代码中，我们使用了 + 选择器将 label 元素和 input 元素结合起来。当输入框获得焦点时，它的 +label 元素将被选中，并应用蓝色的颜色；当输入框符合要求时，它的 +label 元素将应用绿色的颜色；当输入框不符合要求时，它的 +label 元素将应用红色的颜色。

:required

有些输入框必须填写，否则用户无法提交表单。在这种情况下，我们可以在输入框的 required 属性上利用 :valid 和 :invalid 伪类选择器。

<input type="text" id="username" name="username" required>

input[type="text"]:required:invalid {
  border: 2px solid red;
}

以上 CSS 代码将在输入框必须填写的情况下，给予相应的提示。

总结

本篇文章介绍了如何入门 CSS 表单组验证。在实际的开发中，表单验证的内容还是比较丰富的，例如密码格式验证、电邮地址格式验证等，都需要我们在 HTML 和 CSS 中分别实现。在不断的实践中，我们将会逐渐掌握这些技能，提升自己的网页开发水平。