前言
回想一下，当我们在提交表单的时候，往往需要通过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！！！
