「这是我参与11月更文挑战的第二十一天，活动详情查看：2021最后一次更文挑战」。

往期链接：

「CSS之选择器」

「CSS之选择器（二）」

「CSS之选择器（三）」

「CSS之选择器（四）」

「CSS之选择器（五）」

「CSS之选择器（六）::before和::after」

「CSS之选择器（七）:empty」

「CSS之选择器（八）：+ 和 ~」

前言

回想一下，当我们在提交表单的时候，往往需要通过JS来判断输入的内容是否合法，其实，在某些情况下，是可以通过纯CSS来实现表单的校验的。

接下来我们就来介绍一下:valid和:invalid这两个选择器。

:valid和:invalid

• :valid：作用于输入合法的表单节点

• :invalid：作用于输入非法的表单节点

当然，为了体验完整的表单校验，我们还需要加上这两个选择器，

• placeholder：当输入框为空时，可以起到占位的作用，在未输入内容时显示提示文本，内容是传入的参数

• pattern：传入正则表达式，在输入内容时可以触发正则验证结果是否合法

注意：这里要说一点，pattern的正则与JS稍微有一点点不同。JS的正则参数形式是 /regexp/ ，而 pattern 是不需要 / 的，所以只需要传入 regexp 即可。正则会与输入的内容进行动态校验，合法时，触发 :valid， 反之，会触发:invalid。

代码展示

接下来，让我们实地的应用一下，看看效果。

先来一张效果图：

接下来，请看代码实现：

<form class="form-validation">
  <div>
    <label>名字</label>
    <input type="text" placeholder="请输入你的名字(1到10个中文)" pattern="^[\u4e00-\u9fa5]{1,10}$" required>
  </div>
  <div>
    <label>手机</label>
    <input type="text" placeholder="请输入你的手机" pattern="^1[3456789]\d{9}$" required>
  </div>
  <div>
    <label>简介</label>
    <textarea required></textarea>
  </div>
</form>

.form-validation {
  width: 600px;
  div {
    display: flex;

    & + div {
      margin-top: 15px;
    }
  }
  label {
    display: block;
    margin: 0 10px;
    padding-bottom: 5px;
    line-height: 40px;
    font-weight: bold;
    font-size: 16px;
  }
  input,
  textarea {
    flex: 1;
    display: block;
    padding: 0 20px;
    border: 1px solid #ccc;
    height: 40px;
    outline: none;
    caret-color: #09f;
    transition: all 300ms;
    &:valid {
      border-color: green;
    }
    &:invalid {
      border-color: red;
    }
  }
  textarea {
    height: 122px;
    resize: none;
    line-height: 30px;
    font-size: 16px;
  }
}

好，今天就到这里了，今天努力的你依然是最棒的，Bye Bye！！！