CSS3伪类:valid、invalid、required
valid、invalid、required的使用
过去验证表单会通过js和正则去判断填写的内容是否正确,如email的验证。
HTML5的出现为我们提供一些属性,不用编写js和正则即可解决这个检验表单内容。
:required
必须,那input不能为空的意思。
:valid
有效,即当填写的内容符合要求的时候触发。
:invalid
无效,即当填写的内容不符合要求的时候触发。
valid、invalid、required的定义
/* basics */
input
:required {
border : 1px solid blue ;
}
input
:valid {
border : 1px solid green ;
}
input
:invalid {
border : 1px solid red ;
}
DEMO
width="100%" height="350" src="http://jsfiddle.net/weiwei198328/rm5Sj/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0" style="margin: 0px; padding: 0px; border-width: 0px; outline: 0px; vertical-align: baseline; background-color: transparent;">