1，required屬性 - 表示字段不能為空
（注意：只有用戶單擊“提交”按鈕提交表單的時候，瀏覽器才會執行驗證。目前HTML5不支持指定驗證的時間，而且驗證消息的樣式和內容各個瀏覽器不大一樣，不能修改。）
原文:HTML5 - 表單客戶端驗證
<form action="#">
<input type="text" required/>
<input type="submit" value="提交">
</form>
2，關閉驗證的兩種方式
（1）在<form>元素中添加novalidate屬性，禁用整個表單的驗證功能
1
<form action="#" novalidate>
（2）或給提交按鈕添加formnovalidate屬性
1
<input type="submit" value="提交" formnovalidate>
3，修改文本框驗證樣式
雖然我們無法修改驗證消息的樣式，但卻可以根據輸入字段時候需要驗證，已經驗證結果來改變它們的外觀。
這里使用了幾個新的CSS偽類：
required（必填）和optional（選填）：根據字段中是否使用required屬性來應用不同的樣式。
valid（有效）和invalid（無效）：根據控件中是否包含錯誤來應用不同的樣式。
in-range（在范圍內）和out-of-range（超出范圍）：根據控件的min和max屬性判斷輸入值是否超出范圍。
比如：想讓必填的<input>元素應用淺黃色背景，而必填且當前輸入無效值的字段用橙色背景。
input:required {
background-color:lightyellow;
}
input:required:invalid {
background-color:orange;
}
4，pattern屬性 - 使用正則表達式驗證
（1）不必使用^和$字符表示要匹配字段值得開頭和結尾。
（2）只設置pattern的話，空值也會通過。如果不允許空，則還要加上required屬性。
比如：使用正則表達式驗證手機號碼
原文:HTML5 - 表單客戶端驗證
1
<input type="text" title="輸入11位有效的手機號" pattern="1[0-9]{10}" required/>
5，自定義驗證
對於特定字段如果正則表達式驗證還無法滿足需求的話，可以編寫自定義的驗證邏輯，並利用HTML5的驗證機制。
通常使用setCustomValidity()方法提供錯誤消息，瀏覽器會將該消息當做自己的內置消息。在提交表單時，就會看到彈出的提示框中包含自定義的錯誤消息。
比如：驗證輸入內容不得少於20個字符
原文:HTML5 - 表單客戶端驗證
<script>
function validateComments(input) {
if(input.value.length < 20){
input.setCustomValidity("評論不得少於20字");
}else{
//沒有錯誤。清除任何錯誤消息
input.setCustomValidity("");
}
}
</script>
<form action="#">
<input type="text" oninput="validateComments(this)"/>
<input type="submit" value="提交">
</form>