通过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在线地址
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"利用css3进行表单验证并且配带结果提示"
最新评论