CSS3伪类：valid、invalid、required

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