HTML5對表單的約束驗證

    在HTML5中增加了許多新的功能，用於表單提交到服務器之前對表單進行數據的驗證（搶了javascript的飯碗），有了這些功能，即便是javascript沒有加載進來還是可以確保基本的驗證。換句話說，瀏覽器自己會根據標記中的規則執行驗證，然后自己顯示適當的錯誤消息。當然，這些功能既然是來自HTML5 的，當然只能在支持HTML5這部分的內容的瀏覽器才有效，所以請我們看向未來的眼光來學習下面的這些個功能。

1. 必填字段 在表單中指定required字段，凡是標注有required的字段在提交表單時值都不能為空。這個屬性適用於<input>、<textarea>和<select>字段。（opera11及之前的版本還不支持<select>的required屬性）。  

   <form action="post">
           <label for="ele1">約束必填字段：</label><input id="eleOne" type="text" name="username" required>
           <button type="submit">submit</button>
   </form>    

   在chrome下有如下提示：
   
   可以使用如下代碼檢測瀏覽器的支持性

   var isRequiredSuppored = "required" in document.createElement("input"); 

    

   
   
   dfdsfsfsdfsdfsdfsdfsdfsdfasdfsdfasdfasdfasdfasdf

2. 其他輸入類型
   HTML5為input元素的type屬性又增加了幾個值。這些新類型不僅能反映數據類型的信息，而且還能提供一些默認的驗證功能，其中“email”和“url”是兩個得到支持最多的類型，瀏覽器為他們提供了驗證機制。
   

   <form action="post">
           <label for="ele2">其他輸入類型：</label><br>
           <input type="email" name="email"><br>
           <input type="url" name="url"><br>
           <button type="submit">submit</button>
   </form>

   在chrome有如下提示：
   
   提示：瀏覽器只能簡單驗證其輸入的格式並不能驗證它的有效性。
   可以用以下方式來檢測瀏覽器是否支持

   var input = document.createElement("input");
   input.type="email";
   var isEmailedSuppored = (input.type = "email");

    

    

3. 數值范圍
   HTML5還給type定義了其他屬性“number”、“range”、“datatime”、“datatime-local”、“data”、“month”、“week”、“time”。對於這些數值類型的輸入元素，可以指定min屬性（最小的可能值）、max屬性（最大的可能值）和step屬性（從min到max的兩個刻度間的差值）
   

   <form action="post">
       <label for="ele3">數值范圍：</label><input type="number" min="0" max="10" step="2"><br>
       <button type="submit">submit</button>
   </form>

   
   
   在不同的瀏覽器中可能會看到能夠自動遞增遞減的按鈕（如圖），因瀏覽器而異。

4. 輸入模式
   HTML5為文本新增了pattern屬性。這個屬性的值是一個正則表達式，用於匹配文本框中的值
   

   <form action="post">
       <label for="ele4">輸入模式：</label><input type="text" pattern="\d+" name="count"><br>
       <button type="submit">submit</button>
   </form>

   
   注意：模式的開頭和末尾不用加^和$符號（假定已經有了）。這兩個符號表示輸入的值必須從頭到尾都與模式匹配。
   使用以下代碼可以檢測瀏覽器是否支持pattern屬性。

   var isPatternSuppored = "pattern" in document.createElement("input");

    

5. 禁用驗證
   通過設置novalidate屬性，可以告訴我們表單不進行驗證。
   

   <form method="post" action="XXX.php" novalidate>
       <!--這里插入表單元素-> </form>

   如果一個表單中有多個提交按鈕，為了指定點擊某個提交按鈕不必驗證表單，可以在響應的按鈕上添加formnovalidate屬性。

   <form method="post" action="XXX.php" novalidate>
       <!--這里插入表單元素-> <input type="submit" value="submit"> <input type="submit" value="NOsubmit" formvalidate> </form>