通过css3我们也可以进行验证表单非法字符，并且还能给出提示语
1
2
3
4
5
6
7
8
9
10
11
| <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> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| :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 ;
} |
运行结果
pattern是h5的新属性，是针对表单验证扩展，里面可写正则表达式。两个有趣的css3属性，:invalid伪类可根据表单匹配结果来定义样式，:empty匹配空元素。demo在线地址
「两年博客，如果觉得我的文章对您有用，请帮助本站成长」
Rachaellop（3小时前）
JorgeBiz（1天前）
管理员（2周前 (11-04)）
污泥螺杆泵（2周前 (11-04)）
vanhua（1个月前 (10-13)）
管理员（1个月前 (10-11)）
共有 0 条评论 - 利用css3进行表单验证并且配带结果提示