CSS3伪类:valid和:invalid的无敌组合助你打造完美表单校验

2023-12-31 16:16:57

CSS3伪类:valid和:invalid简介

在HTML5时代，前端开发人员通常使用JavaScript来实现表单校验。然而，随着CSS3的不断发展，CSS3伪类:valid和:invalid的出现为表单校验提供了更简单、更优雅的解决方案。

:valid伪类用于匹配输入值为合法的元素，而:invalid伪类用于匹配输入值为非法的元素。这意味着，我们可以直接使用CSS来对表单元素进行校验，而无需编写额外的JavaScript代码。

如何使用:valid和:invalid伪类

要使用:valid和:invalid伪类，只需在CSS样式表中针对相应的表单元素添加相应的样式规则即可。例如，以下代码将为所有合法的输入元素添加绿色边框，并为所有非法的输入元素添加红色边框：

input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

表单校验实例

下面是一个简单的表单校验实例，演示了如何使用:valid和:invalid伪类来实现表单校验：

<!DOCTYPE html>
<html>
<head>
  
  <style>
    input:valid {
      border-color: green;
    }

    input:invalid {
      border-color: red;
    }
  </style>
</head>
<body>
  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" required>

    <label for="email">邮箱：</label>
    <input type="email" id="email" required>

    <label for="password">密码：</label>
    <input type="password" id="password" required>

    <input type="submit" value="提交">
  </form>
</body>
</html>