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