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

  • 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 原生的表單驗證來幫我們檢查輸入內容了。

課程推薦

用AI強化職場競爭力 ChatGPT、Midjourney從入門到精通

用AI強化職場競爭力 ChatGPT、Midjourney從入門到精通

在快速變遷的職場中,提升競爭力成為關鍵。透過引領潮流的AI技術,ChatGPT和Midjourney將助您勇攀高峰。無論您是AI新手還是專家,這個課程將引導您從入門到精通,解密AI的奧秘,並學習如何運用於職場。
GitHub Copilot AI 程式碼編輯工具應用實務班

GitHub Copilot AI 程式碼編輯工具應用實務班

讓學員瞭解有效地使用該工具來加速開發流程、提高程式碼品質和生產力。課程重點放在以 JavaScript 程式語言為例,介紹 Copilot 的基本原理、使用方法和最佳實踐。

輸入折扣碼 TC1456JA 還可以額外獲得 NT$500 優惠喔。

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

掌握Clipchamp AI的操作技巧,靈活運用Clipchamp AI進行影片編輯和創作,實現創意表達和傳播目的。

輸入折扣碼 TC1451JAN 還可以額外獲得 NT$500 優惠喔。

如何串接多種數位工具資訊?Looker Studio 資料視覺化實戰班|GoogleAds x FB廣告 x GA流量數據

如何串接多種數位工具資訊?Looker Studio 資料視覺化實戰班|GoogleAds x FB廣告 x GA流量數據

Looker Studio除了可協助使用者監控網站流量、廣告成效、選擇匯入資源的管道之外,還可以將數據資料多平台整合、數據報表即時更新、數據範本可重複套用的效益,透過自動化系統,將數據全部匯入同一個報表平台,是企業不可或缺的重要工具。

輸入折扣碼 TC1270JIA 還可以額外獲得 NT$500 優惠喔。

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。