往期链接：
「CSS之选择器」
「CSS之选择器（二）」
「CSS之选择器（三）」
「CSS之选择器（四）」
「CSS之选择器（五）」
「CSS之选择器（六）::before和::after」
「CSS之选择器（七）:empty」
「CSS之选择器（八）：+ 和 ~」
前言
回想一下，当我们在提交表单的时候，往往需要通过 JS 来判断输入的内容是否合法，其实，在某些情况下，是可以通过纯 CSS 来实现表单的校验的。
接下来我们就来介绍一下:valid 和:invalid 这两个选择器。
:valid 和:invalid
:valid：作用于输入合法的表单节点
:invalid：作用于输入非法的表单节点
当然，为了体验完整的表单校验，我们还需要加上这两个选择器，
注意：这里要说一点，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！！！
评论