HTML5表單用戶端驗證的例子

過去對於用戶端的表單驗證，通常是使用JavaScript驗證指令碼，要麼自己寫，要麼使用第三方庫。而在HTML5中，提供了一套用戶端驗證方法，只需要在<input>欄位裡嵌入常用的錯誤檢查規則即可。

1，required屬性 - 表示欄位不可為空

（注意：只有使用者單擊“提交”按鈕提交表單的時候，瀏覽器才會執行驗證。目前HTML5不支援指定驗證的時間，而且驗證訊息的樣式和內容各個瀏覽器不大一樣，不能修改。）

 

<form action="#">
  <input type="text" required/> 
  <input type="submit" value="提交">
</form>

2，關閉驗證的兩種方式

（1）在<form>元素中添加novalidate屬性，禁用整個表單的驗證功能

<form action="#" novalidate>

（2）或給提交按鈕添加formnovalidate屬性

<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屬性 - 使用Regex驗證
（1）不必使用^和$字元表示要匹配欄位值得開頭和結尾。
（2）只設定pattern的話，空值也會通過。如果不允許空，則還要加上required屬性。

比如：使用Regex驗證手機號碼

 

<input type="text" title="輸入11位有效手機號" pattern="1[0-9]{10}" required/>

5，自訂驗證

對於特定欄位如果Regex驗證還無法滿足需求的話，可以編寫自訂的驗證邏輯，並利用HTML5的驗證機制。
通常使用setCustomValidity()方法提供錯誤訊息，瀏覽器會將該訊息當做自己的內建訊息。在提交表單時，就會看到彈出的提示框中包含自訂的錯誤訊息。

比如：驗證輸入內容不得少於20個字元

<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>