HTML5表单验证

在支持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;
}