HTML5中針對表單新增的驗證屬性如required、pattern以及一些特定input類型，當驗證不通過時，都有默認的提示語句，但實踐中發(fā)現(xiàn)并不怎么友好，因此，需要自定義提示語句，使用setCustomValidity()。
validityState對象：
HTML5表單新增的屬性中有一個 validity 屬性，通過該屬性可以獲得一個 validityState 對象，而validityState 對象針對表單的幾個錯誤則返回false，配合email、number、url等類型使用
patternMismatch
判斷正則是否通過，沒通過返回true，通過返回false，配合pattern屬性使用
toolong
判斷當前元素的值的長度是否大最大值，大于返回true，否則返回false，配合maxlength使用，但實際上如果設(shè)置maxlength，就無法輸入超出長度范圍的值
rangeUnderflow
判斷當前元素值是否小于min，與min屬性配合，不與max比較
rangeOverflow
判斷當前元素值是否大于max，與max屬性配合，不與min比較
stepMismatch
判斷當前元素值是否符合step要求，與step屬性配合
customError
使用自定義的驗證錯誤提示信息，配合setCustomValidity()方法使用；
如果使用了setCustomValidity()方法，customError屬性返回true，那么當輸入正確時，不能使用上述的任何一種屬性驗證輸入是否正確，所有的驗證都返回false，表單的驗證邏輯將會出現(xiàn)bug。
因此，在自定義錯誤提示信息時，需要首先使用input.value判斷輸入是否為空，如果不是空值，調(diào)用input.setCustomValidity(“”)將提示信息設(shè)為空，從而屏蔽輸入正確時出現(xiàn)的驗證邏輯錯誤，之后再設(shè)置自定義錯誤提示語，示例：
<body>
<form>
<input id="userName" type="text" required pattern="^[a-zA-Z0-9]{6,12}$" placeholder="請輸入用戶名"/>
<input type="submit" value="提交"/>
</form>
</body>
<script>
var userName = document.getElementById("userName");
userName.onblur=function(){
if(userName.validity.patternMismatch){
userName.setCustomValidity("用戶名只能是英文或者數(shù)字,長度6到12位");
}else if(userName.validity.valueMissing){
// valueMissing目的：確保表單控件中的值已填寫
// 用法：在表單控件中將required特性設(shè)置為true。
userName.setCustomValidity("用戶名不能為空");
}else{
userName.setCustomValidity("");//現(xiàn)將有輸入時的提示設(shè)置為空
}
}
</script>
在HTML5中，form元素與input元素（包括select與textarea元素）都具有checkValidity()方法，調(diào)用該方法可以顯式的對表單內(nèi)所有元素內(nèi)容或單個元素內(nèi)容進行有效性驗證。該方法的返回類型為boolean。示例如下：
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>checkValidity 示例</title>
<script type="text/javascript">
var check=function(){
var emailEmnt=document.forms['testForm'].email; //輸出表單email屬性值為testForm的 emailEmnt document.forms['testForm'] 表示獲取當前頁面的id="testForm"的表單
var emailTxt=emailEmnt.value;//輸出表單email屬性值為testForm的 emailEmnt的值
if(emailTxt==""){
alert('請輸入郵箱地址');return false;
}else if(email.checkValidity()){
alert('請輸入正確的郵箱地址');return false;
}
return true;
}</script>
</head>
<body>
<form id="testForm" name="testForm" onsubmit="return check();">
<label id="email" for="email">E-mail:</label>
<input type="email" name="email"/>
<button type="submit">提交</button>
</form>
</body>
</html>
有時可能想把表單臨時提交一下，但又不想讓它進行有效性驗證。有兩種方法可以取消表單驗證。
第一種方法: 利用form元素的novalidate屬性，它可以關(guān)閉整個表單驗證。當整個表單需要驗證的內(nèi)容較多，但又想先提交一部分內(nèi)容時，可以使用該方法。先把表單的該屬性設(shè)置為true，關(guān)閉表單驗證，并提交第一部分內(nèi)容，然后在將要提交第二部分內(nèi)容時，再將該屬性設(shè)置為false，打開表單驗證，進行第二部分內(nèi)容的提交。
第二種方法: 利用input元素或submit元素的formnovalidate屬性，利用input元素的formnovalidate屬性可以讓表單驗證對單個input元素失效；而如果對submit按鈕使用該屬性，點擊按鈕時，相當于利用了form元素的novalidate屬性，整個表單驗證都將關(guān)閉。
利用這一點可以實現(xiàn)“假提交”與“真提交”的效果。
HTML5中許多新的input元素都帶有對輸入內(nèi)容進行有效性檢查的功能，如果檢查不通過，瀏覽器會針對該元素提供錯誤信息。 要實現(xiàn)自定義錯誤信息，可以使用JavaScript調(diào)用各input元素的setCustomValidity()方法來自定義錯誤信息。示例如下：
<!DOCTYPE html><html>
<head lang="en">
<title>自定義錯誤信息示例</title>
<script>
var check= function () {
var passwd1=document.forms['testForm'].passwd1;
var passwd2=document.forms['testForm'].passwd2;
if(passwd1.value!=passwd2.value){
passwd2.setCustomValidity('密碼不一致');
return false;
}else{
passwd2.setCustomValidity('');
}
var email1=document.forms['testForm'].email1;
if(!email1.checkValidity()){
email1.setCustomValidity("請輸入正確的E-mail地址！");
return false;
}
return true;
}
</script>
</head>
<body>
<form id="testForm" name="testForm" onsubmit="return check();">
<label id="pass1" for="pass1">密碼:</label>
<input type="password" name="passwd1"/>
<br/>
<label id="pass2" for="pass2">確認密碼:</label>
<input type="password" name="passwd2"/>
<br/>
<label id="email" for="email">E-mail:</label>
<input type="email" name="email1"/>
<br/>
<button type="submit">提交</button>
</form>
</body>
</html>
