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;">