纯CSS实现表单验证

2022-03-12 10:56:50

ladies and 乡亲们，表单验证你在做吗？客户端or服务器端，javascript or jquery，动手写 or 使用插件，今天我们来探索下使用纯css实现表单验证，借以学习css selectors level 4中的表单相关的伪类选择器。

案例欣赏

代码我同样放到了codepen，大家可以在线研究，或下载收藏。

知识解析

关键在于使用css selectors levle4里的一些伪类实现表单验证，这些伪类有：

:required和:optional
:in-range和out-of-range
:valid和:invalid
:read-only和:read-write

上面的案例就是使用了:in-range和:out-of-range，接下去我们来一一解读下。

:required和:optional

:required可以选中具有required属性的表单元素，可以是input、select和textarea，例如下面这些元素都会被选中。

<input type="name" required>

<input type="checkbox" required>

<input type="email" required>

<!-- and other input types as well.. -->

<textarea name="name" id="message" cols="30" rows="10" required></textarea>

<select name="nm" id="sel" required>

    <!-- options -->

</select>

:optional则选中不具有required属性的表单元素，利用这两个伪类我们可以实现下面这个有意思的效果。代码同样放在了codepen，在线研究or下载收藏，悉听尊便。

本代码主要利用:required和:optional两个伪类对必选和选填的两种表单实施不同的样式，不同的提示文字。核心代码如下所示。

/*可选表单样式*/

input:optional,

select:optional {

  border-right: 3px solid #888;

  background-color: #f8f8f8;

  color: #888;

}

/*必选表单样式*/

input:required,

textarea:required {

  border-right: 3px solid #aa0088;

}

/*可选表单提示文字*/

input:optional+label::after{

  content:"(可选)";

}

/*必选表单提示文字*/

input:required+label::after{

  content:"(必填)";

}

/*可选表单激活效果*/

input:optional:focus,

select:optional:focus {

  box-shadow: 0 0 2px 1px #aaa;

}

/*必选表单激活效果*/

input:required:focus,

select:required:focus,

textarea:required:focus {

  outline: 0;

  box-shadow: 0 0 2px 1px #aa0088;

}

:in-range和out-of-range

这两个伪类分别选中表单属性值在范围内、范围外两个状态，这两个伪类可以用在接受数字范围的元素上，例如type为number的表单或者sliders。案例效果如上面“案例欣赏”版块所示，我们这里仅仅展示核心代码，借以帮助大家理解两个伪类的使用。

input:out-of-range{

  border: 1px solid tomato;

}

input:in-range~ label::after {

  content: "输入一个正确的从1到10的数字";

}

input:out-of-range ~ label::after {

  content: "枣糕，你傻了！";

}

:valid和:invalid

这两个伪类针对具有type的input表单而立，比如有一个type=email的表单，当它的值不是有效的邮箱格式时触发:invalid伪类，值为有效的邮箱格式时触发:valid伪类。

同样，放在了codepen，请在线研究或下载收藏，然后我们来看看核心代码，如下所示。

input:invalid{

  border: 1px solid tomato;

}

input:valid~ label::after {

  content: "耶，一个邮箱！";

}

input:invalid ~ label::after {

  content: "枣糕，邮箱邮箱，是邮箱吗？";

}

:read-only和:read-write

下面这些元素可以激活:read-only伪类。

具有disabled属性的表单
具有read-only或disbaled属性的text-area
其他没有指定contenteditable属性的任何元素

例如下面代码代码所示的元素，都可以激活:read-only伪类选择器。

<input type="text" disabled>

<input type="number" disabled>

<input type="number" readonly>

<textarea name="nm" id="id" cols="30" rows="10" readonly> </textarea>

<div class="random"> </div> <!-- regular element that is not editable with contenteditable -->

:read-write元素恰恰与:read-only元素相反。

这个比较简单，就不再做案例。谢谢。

浏览器兼容情况

上述的几个伪类选择器在标准浏览器(chrome、safari、opera、firefox)里支持良好，IE支持不好。

深入阅读

致谢

前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助。

本文原文链接，http://blog.csdn.net/whqet/article/details/43449045

欢迎大家访问独立博客http://whqet.github.io

码农公寓