纯css实现表单验证

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,例如下面这些元素都会被选中。

1
2
3
4
5
6
7
8
<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两个伪类对必选和选填的两种表单实施不同的样式,不同的提示文字。核心代码如下所示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/*可选表单样式*/
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。案例效果如上面“案例欣赏”版块所示,我们这里仅仅展示核心代码,借以帮助大家理解两个伪类的使用。

1
2
3
4
5
6
7
8
9
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,请在线研究下载收藏,然后我们来看看核心代码,如下所示。

1
2
3
4
5
6
7
8
9
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伪类选择器。

1
2
3
4
5
<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支持不好。

##深入阅读