HTML5 新的 input 屬性

HTML5 多了不少新的 input 的類型，除了可以方便幫我們取得一些特定的值外(像 color、range)，還有可以幫我們簡單檢查欄位的內容(像 email、url)，以下則為新增的一些屬性：color、range、number、email、url、tel、search、date、time、datetime-local、week、month

而 UI 的樣子也會因為瀏覽器不同而有些差異，而 datetime-local、week、month 則是在 safari 和 firefox 都不支援，可以透過以下看一下在瀏覽器呈現的樣子。

還可以透過設定以下屬性來設定內容的驗證：

• required: 檢查必填
• min: 最小值
• max: 最大值
• step: 設定每次增加或減少的值，比如說設定為 3，則內容的值為 3、6、9...，在送出時也會檢查是否為 3 的倍數
• pattern: 用來自訂輸入欄位的格式

其中 pattern 比較複雜一點我們獨立來講，這個就是用來設定輸入欄位的格式的，會以 regex 的形式來設定需要輸入的格式。

比如說以下幾個範例：

公司統編 8 位數數字

至少8位英數的密碼限制

台灣手機號碼 ( - 號相容)

信用卡號碼

這樣就可以依據自訂的方式來檢查使用者輸入的內容是否符合格式，而如果想要取消 html 5 本身的表單驗證的話，可以在 form 上使用 novalidate 或在 submit 上使用 formnovalidate，這個會用在如果我們使用了 js 驗證內容(一般是在 ajax 檢查的情況下)時，避免兩者衝突使用的。

在驗證的時候，我們也可以使用 validity 這個屬性幫我們自訂輸入不符合正確內容時顯示的錯誤訊息，可以設定的內容如下：

這邊我們可以利用判斷是否有不符合規則的輸入內容，再透過 .setCustomValidity() 去改變驗證錯誤時的顯示內容

var s = this.validity;
    var msg = "";
    switch (true) {
        case s.valueMissing:
            msg = "請輸入統一編號";
            break;
        case s.patternMismatch:
            msg = "請輸入正確的統編格式";
            break;
      }
this.setCustomValidity(msg);

像這樣我們就能利用 html5 原生的表單驗證來幫我們檢查輸入內容了。