HTML5新增的客戶端校驗，你跟上HTML5時代前進的腳步了嗎？
阿新 • • 發佈：2018-11-02
在以前，客戶端校驗只能通過JavaScript來完成，不過HTML5的出現，改變了這種現狀，HTML5為表單控制元件增加了一些輸入校驗屬性。HTML5頁面只要簡單地設定這些校驗屬性即可完成客戶端校驗。
1.使用校驗屬性執行校驗
HTML5為表單控制元件添加了如下幾個校驗屬性。
- required：指定表單控制元件必須填寫。
- pattern：指定表單控制元件的值必須符合指定的正則表示式。
- min、max、step：這3個屬性只對數值型別、日期型別的input元素有效，這3個屬性控制表單控制元件的值在min到max之間，並且按照step來增長。
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 通過屬性進行校驗 </title> </head> <body> <form action="add" method="post"> 圖書名：<input name="name" type="text" required/><p> 圖書ISBN：<input name="isbn" type="text" required pattern="\d{3}-\d-\d{3}-\d{5}"/><p> 圖書價格：<input name="price" type="number" min="20" max="150" step="5"/><p> <input type="submit" value="提交"/> </form> </body> </html>
上面程式碼表示：圖書名對應胡表單要求必須填寫，圖書ISBN對應胡表單控制元件不僅庶填寫還需要符合正則表示式，圖書價格則必須必須20-150之間而且必須是5的倍數。
2.呼叫checkValidity方法進行校驗
如果我們想使用對話方塊來去彈出錯誤提示，或者有其他校驗要求，則可藉助HTML5為表單控制元件提供的checkValidity()方法進行校驗。
- 如果呼叫checkValidity()方法返回true，則表示表單內的所有元素的輸入都有效。只要任意有表單元素不能通過校驗，則會返回false。
- 如果呼叫checkValidity()方法返回true，則表示表單內的所有表單元素可以通過輸入校驗，否則返回false。
例如，如下程式碼使用了checkValidity()方法執行輸入校驗：
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 通過checkValidity進行校驗 </title> </head> <body> <form action="add" method="post"> 生日：<input id="birth" name="birth" type="date"/><p> 郵件地址：<input id="email" name="email" type="email"/><p> <input type="submit" value="提交" onclick="return check();"/> </form> <script type="text/javascript"> var check = function() { return commonCheck("birth" , "生日" , "欄位必須是有效的日期！") && commonCheck("email" , "郵件地址" , "欄位必須符合電子郵件的格式！"); } var commonCheck = function(field , fieldName , tip) { var targetEle = document.getElementById(field); // 如果該欄位的值為空 if (targetEle.value.trim() == "") { alert(fieldName + "欄位必須填寫！"); return false; } // 呼叫checkValidity()方法執行輸入校驗 else if(!targetEle.checkValidity()) { alert(fieldName + tip); return false; } return true; } </script> </body> </html>
如果我們輸入的郵件地址不符合規則，當用戶點選頁面上的提交按鈕時，將可以看到如下對話方塊。
3.自定義錯誤提示
在預設情況下，HTML5要求每個瀏覽器為每個校驗規則都提供相應的錯誤提示，這些錯誤資訊都是固定的。但在有些情況下，還是希望有自定義的錯誤提示，而不是顯示預設的提示資訊，則可以藉助HTML5的setCustomValidity()方法來實現，該方法需要接收一個字串引數，來作為提示。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 通過屬性進行校驗 </title>
</head>
<body>
<form action="add" method="post">
圖書名：<input id="name" name="name" type="text" required/><p>
圖書ISBN：<input id="isbn" name="isbn" type="text"
required pattern="\d{3}-\d-\d{3}-\d{5}"/><p>
圖書價格：<input id="price" name="price" type="number"
min="20" max="150" step="5"/><p>
<input type="submit" value="提交" onclick="check();"/>
</form>
<script type="text/javascript">
var check = function()
{
if(!document.getElementById("name").checkValidity())
{
document.getElementById("name").setCustomValidity("圖書名是必填的！");
}
if(!document.getElementById("isbn").checkValidity())
{
document.getElementById("isbn").setCustomValidity("圖書ISBN必須填寫，"
+ "\n而且必須符合xxx-x-xxx-xxxxx的格式（其中x代表數字）。");
}
if(!document.getElementById("price").checkValidity())
{
document.getElementById("price").setCustomValidity("圖書價格必須填寫，"
+ "\n而且必須在20~150之間，且是5的倍數。");
}
};
</script>
</body>
</html>目前瀏覽器對於自定義異常胡支援還不是很理想，當呼叫了setCustomValidity()方法改變提示錯誤之後，必須重新整理瀏覽器才會生效。
4.關閉校驗
在特定的情況下，如果想關閉HTML5的輸入校驗，則可以通過下面兩種方法實現。
- 為form元素增加novalidate屬性，該屬性是一個支援boolean型別的屬性。
- 為type=sumbit的<input>或<button>元素設定formnovalidate屬性。
第一種方式將會直接關閉表單的輸入校驗功能，無論通過哪個按鈕，都不會執行校驗。第二種是由指定的提交按鈕來關閉表單的輸入校驗，只有我們指定了formnovalidate屬性才會關閉表單的輸入校驗。示例如下：
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 關閉校驗 </title>
</head>
<body>
<form action="add" method="post">
圖書名：<input name="name" type="text" required/><p>
圖書ISBN：<input name="isbn" type="text"
required pattern="\d{3}-\d-\d{3}-\d{5}" /><p>
圖書價格：<input name="price" type="number"
min="20" max="150" step="5"/><p>
<input type="submit" value="不校驗提交" formnovalidate/>
<input type="submit" value="校驗提交"/>
</form>
</body>
</html>
小提示：雖然novalidate和formnovalidate兩個屬性都支援boolean型別，但如果在頁面將它們設定為false,並不能重新啟用輸入校驗。
----------------------人只要不失去方向，就不會失去自己！人生重要的不是所站的位置，而是所朝的方向。---------------------