在支持HTML5表单验证的浏览器中，可以通过表单控件来访问ValidityState对象
<form action="#">
<input type="text" name="txt" id="txt" required="" />
<input type="email" name="email" id="email" required="" />
<input type="submit" name="btn" value="submit" />
<br />
<input type="button" value="验证 email 元素" onclick="validateEmail();" />
</form>
function validateEmail(){
var email = document.getElementById("email");
var validityState = email.validity;
alert (
validityState.valid + " " +
validityState.valueMissing + " " +
validityState.typeMismatch + " " +
validityState.patternMismatch + " " +
validityState.tooLong + " " +
validityState.rangeUnderflow + " " +
validityState.rangeOverflow + " " +
validityState.stepMismatch + " " +
validityState.customError);
}
valid属性表示表单控件是否通过了所有的验证约束条件，就是最终的验证结果，如果8个验证条件都通过了，就是true,只要有一个返回true，valid就是false
valueMissing
设置了required如果没填返回true
typeMismatch
type=number不是数字，email没有@
patternMismatch
是否符合正则表达式
pattern属性可以设置控件的正则表达式验证机制，需要同时设置title告诉用户这个规则
<input type="text" id="country_code" name="country_code" pattern="[A-z]{3}" title="请填写3个字母的国家代码" />
tooLong
设置了maxLength，如果超过了返回true
rangeUnderflow
设置了min值，如果小于最小值，返回true
rangeOverflow
设置了max值，如果大于最大值，返回true
stepMismatch
设置了step，如果出现了不满足step的值，返回true
customeError
自定义验证消息，一般用在验证两次输入的密码是否一致
通过setCustomValidity函数来自定义错误提示消息
<input type="text" id="password1" onchange="checkPwd()" />
<input type="text" id="password2" onchange="checkPwd()" />
function checkPwd(){
var pwd1 = document.getElementById("password1");
var pwd2 = document.getElementById("password2");
if (pwd1.value != pwd2.value){
pwd1.setCustomValidity("密码不一致！");
}else{
pwd1.setCustomValidity("");
}
}
验证反馈
为字段添加invalid事件处理函数可以接收到验证通知，自定义提示信息，通过preventDefault阻止浏览器的默认验证处理。
通过e.stopPropagation();方法可以阻止事件冒泡
function handler(e){
var validity = e.srcElement.validity;
if (validity.patternMismatch)
{
alert("格式错误！");
}
e.preventDefault();
}
document.getElementById("country_code").addEventListener("invalid", handler, false);
关闭验证
应用场景，表单保存的时候，不需要验证
通过设置formNoValidate属性来实现
<input type="submit" name="save" formnovalidate value="保存" />
表单样式
可以通过伪类来控制验证的样式
valid 验证通过待提交状态
invalid 验证失败的样式
in-range 在最大值和最小值之间
out-of-range 不在范围内
required 必须的元素
optional 不是必填的元素
input:invalid {
border:1px solid red;
}
