HTML5 新的 input 屬性

分享:
標籤: HTML HTML5 HTML5 API

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 這個屬性幫我們自訂輸入不符合正確內容時顯示的錯誤訊息,可以設定的內容如下:

  • valid: 當前輸入是否有效
  • badInput: 輸入無效,如number框輸入abc
  • patternMismatch: 正則表示式驗證失敗
  • rangeOverflow:  輸入值超過max的值
  • rangeUnderflow: 輸入值小於min的值
  • tooLong : 輸入的字元數超過maxlength
  • tooShort :   輸入的字元數小於minlength
  • stepMismatch : 輸入的數字不符合step限制(step 的倍數)
  • typeMismatch : 輸入值不符合email、url的驗證
  • valueMissing : 未輸入值
  • customError :  是否存在自定義錯誤

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

 

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

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