HTML5伪类选择器表单验证

input : required   选择必填表单域

input : focus : invalid 选择当前聚焦的且含有非法输入值的表单域

input : focus : valid 选择当前聚焦的且含有合法输入值的表单域

 

使用上面的伪类选择器再编写三条新规则：

input : required {
border : 1px solid red;
}

//输入值不符合格式时，表单右边出现×
input : :focus : invalid {
background:url('../img/cross.png') no-repeat right;  //×图片
}

//输入值符合格式时，表单右边出现√
input : :focus : valid {
background:url('../img/tick.png') no-repeat right;  //√图片
}