『极限版』不掺水，用纯 CSS 来实现超飒的表单验证功能

痛定思痛。 2022-12-05 15:14 179阅读 0赞

>  *  作者：陈大鱼头
>  *  github：KRISACHAN

去年的时候写过一篇文章 纯CSS实现表单验证 ，在发表之后不久就有网友跟鱼头说，打算拿我这篇文章作团队内部分享。

当时听到这个消息之后，在屏幕前的鱼头笑咧了嘴，但这位童鞋的下一段内容，就让我马上笑不起出来了。

不过因为初始化状态是这样的：

![format_png][]

所以希望我能够改一下，改成这样：

![format_png 1][]

只有在进行输入且输入内容不对的时候才展示错误信息。

![format_png 2][]

这位童鞋：“所以这功能能实现吗？”

我：“。。。。。。”

既然有童鞋这么看得起鱼头，还打算拿鱼头的 DEMO 来作内部分享，那总得硬着头皮来实现这个功能。

首先我们来看一下最终成果图：

![format_png 3][]

DEMO 在线查看地址：https://codepen.io/krischan77/pen/WmVKYr

各位读者童鞋，来跟鱼头一起拆分下功能实现：

## HTML ##

首先我们来看 `HTML` 的源码

<form class="form" id="form" method="get" action="/api/form">
        账号：
        <input data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}" name="account" type="text" required />
        <span class="f-tips">请输入正确的账号</span>
        <br />
        密码：
        <input data-title="密码" placeholder="请输入正确的密码" pattern="\w{6,10}" name="password" type="password" required />
        <span class="f-tips">请输入正确的密码</span>
        <br />
        <input name="button" type="submit" value="提交" />
    </form>

这里面的 `HTML` 标签都比较常规，但是我们要注意下 `<input />` 所携带的几个属性：

### required ###

`<input required/>` 中的 `required` 是一个布尔属性，用来告诉浏览器这个 `<input>` 是否是必填项。

我们来康康DEMO：

<p class="p">
        <h1>请输入信息</h1>
        <form action="/userInfo">
            <input name="text" type="text" required />
            <input name="submit" type="submit" value="提交信息">
        </form>
    </p>

效果如下：

![format_png 4][]

兼容性如下：

![format_png 5][]

原生样式体验也是不错的。

### pattern ###

再来 `pattern` 属性。

`<input pattern="">` 用于校验输入 `value` 是否有效。

我们康康DEMO：

<p class="p">
        <form>
            <h1>请输入 我爱鱼头</h1>
            <input name="text" type="text" pattern="我爱鱼头"  required />
            <button type="submit">提交信息</button>
        </form>
    </p>

效果如下：

![format_png 6][]

兼容性如下：

![format_png 7][]

不得不感慨，原生组件的能力也是很强的。

## CSS ##

接下来我们康康CSS的部分，源码如下：

:root {
        --error-color: red;
    }
    .form > input {
        margin-bottom: 10px;
    }
    .form > .f-tips {
        color: var(--error-color);
        display: none;
    }
    input[type="text"]:invalid ~ input[type="submit"],
    input[type="password"]:invalid ~ input[type="submit"] {
        display: none;
    }
    input[required]:focus:invalid + span {
        display: inline;
    }
    input[required]:empty + span {
        display: none;
    }
    input[required]:invalid:not(:placeholder-shown) + span {
        display: inline;
    }

我们重点介绍以下几个 `CSS` 选择器：

### :invalid 与 :valid ###

判断有效性的伪类选择器（`:valid`和`:invalid`）匹配有效或无效，`<input>`或`<form>`元素。

`:valid`伪类选择器表示值通过验证的`<input>`，这告诉用户他们的输入是有效的。

`:invalid`伪类选择器表示值不通过通过验证的`<input>`，这告诉用户他们的输入是无效的。

例子如下：

效果如下：

![format_png 8][]

兼容性如下：

![format_png 9][]

###    :placeholder-shown ###

`:placeholder-shown` 伪类 在 `<input>` 或 `<textarea>` 元素显示 placeholder text 时生效。

例子如下：

效果如下：

![format_png 10][]

兼容性如下：

![format_png 11][]

##    实现逻辑 ##

有了上面的几个 `<input />` 属性以及 `css` 选择器的伪类说明，那么这个纯CSS实现表单验证的功能就变得简单多了。

我们先来整理下功能要求：

1.  初始化状态：不展示提交按钮以及错误提示
2.  清空输入状态：不展示提交按钮以及错误提示
3.  输入错误状态：输入框输入错误时，展示错误提示
4.  输入正确状态：输入框输入正确时，隐藏错误提示，展示提交按钮

### 初始化状态 ###

首先我们知道，**初始化** 时，是没有提示信息的，所以提示信息可以直接隐藏，至于提交按钮，我们就利用 `:invalid` 来隐藏，因为初始化的 `input.value` 内容是不匹配的。所以我们有：

### 清空输入状态 ###

**清空输入状态** 也比较简单，可以直接用伪类选择器 `:empty` 来判断，只要内容为空，则隐藏错误信息，所以我们有：

input[required]:empty + span {
        display: none;
    }

### 输入错误状态 ###

在 **初始化** 时已经隐藏了错误信息，而 **初始化** 其实也是依赖于 **输入错误** 这个状态，不过好在我们有伪类选择器 `:focus` ，它表示获得焦点的元素（如表单输入），所以我们有：

input[required]:focus:invalid + span {
        display: inline;
    }

虽然我们不能通过 **输入错误** 这个状态来处理，但是我们可以监听用户聚焦的行为来实现。

但是这么做有个弊端，就是当我在另外一个输入框输入信息的时候，错误提示也会消失，所以我们还需要判断是否有 `placeholder`，输入了 `value` ，自然没有 `placeholder` ，所以我们有：

input[required]:invalid:not(:placeholder-shown) + span {
        display: inline;
    }

### 输入正确状态 ###

当完成上述三个状态的实现之后， **输入正确** 的状态就可以不用编写了，因为不匹配错误的，就是匹配正确。

## 总结 ##

一个完整的 **纯CSS表单功能** 就这么完成了，DEMO地址在这：

https://codepen.io/krischan77/pen/WmVKYr

也可以点击 『阅读原文』 来查看

由于实际项目的复杂度，这个功能不一定直接用起来，但是里面的知识点，思路我们都是可以复用的。

不得不感慨，如今 `html` 跟 `css` 的能力变得强大了起来，只要我们愿意散发思维，一定能编写出更多有意思，有价值的效果。

欢迎大家多方尝试！

## 参考资料 ##

1.  whatwg 4.10.5 The `input` element
2.  纯CSS实现表单验证
3.  『真香警告』这33个超级好用的CSS选择器，你可能见都没见过。
4.  CSS 选择器

[format_png]: /images/20221123/4b9c69c082ad4b50a8110e9c6b84a6dc.png
[format_png 1]: /images/20221123/7fd5773c04bb42aa813aff565a0d9394.png
[format_png 2]: /images/20221123/993c8face7094b72badb01576b25b94b.png
[format_png 3]: /images/20221123/7a4a2e056e6a48858884ed1dab8afb61.png
[format_png 4]: /images/20221123/6896015ccde74607b31d5e66b9657406.png
[format_png 5]: /images/20221123/9a3d5a7227f54c4a9e8562165f9b9b01.png
[format_png 6]: /images/20221123/b4af7200213140f7b8febf697e040179.png
[format_png 7]: /images/20221123/3980d8282d7a46979ab31dee6e3df696.png
[format_png 8]: /images/20221123/51d6e48db5894c4092d5dc517f8ef583.png
[format_png 9]: /images/20221123/90f22e502c864896a5944d558ffa9bd7.png
[format_png 10]: /images/20221123/3ac782c19a9944f39041408880801901.png
[format_png 11]: /images/20221123/f4db45af9b754dc1837d12d5a394ae6f.png