纯CSS实现表单验证功能

1. HTML 代码
• required
• pattern
2. CSS 代码
• :invalid 与 :valid
• :placeholder-shown
3. 实现逻辑
• 初始化状态
• 清空输入状态
• 输入错误状态
• 输入正确状态
4. 总结

今天为大家整理一篇纯 CSS 实现表单验证功能，要求只有在进行输入且输入内容不对的时候才展示错误信息。

先来看看我们最终实现的效果：

实现逻辑

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

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

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

初始化状态

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

<style>
    .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;
    }
</style>
<input data-title="账号" placeholder="请输入正确的账号" pattern="w{6,10}" name="account" type="text" required />
<input data-title="密码" placeholder="请输入正确的密码" pattern="w{6,10}" name="password" type="password" required />
<span >请输入正确的密码</span>

清空输入状态

清空输入状态 也比较简单，可以直接用伪类选择器 :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 表单功能 就这么完成了，下面附上全部源码，方便大家学习。

HTML 代码：

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

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;
}

总结

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

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

欢迎大家多方尝试！