[javascript] 透過 HTML5 API 做表單驗證

透過 HTML5 API，我們就可以透過設定表單驗證的錯誤訊息客製化瀏覽器內建的驗證行為。

首先只要在 input 欄位上加上 required 屬性，就能透過瀏覽器幫你做表單驗證。

input type="text" >

在使用 pattern 就能設定輸入內容的格式，像下面我就是簡單設定輸入 8 碼的數字：

input type="text" pattern="\d{8}">

更多的正規表達式範例可以參考這個網站。

要自訂驗證錯誤訊息的話，可以參考以下示範：

<form action="">
  <input type="text" required id="code"
         pattern="\d{8}"
         >
  <div>
    <button type="submit">送出</button>
  </div>
</form>

js 的部分：

let code=document.querySelector("#code")
code.addEventListener("blur", function(){
  let s = this.validity;
  let msg = "";
  switch (true) {
      case s.valueMissing:
           msg = "請輸入統一編號";
           break;
      case s.patternMismatch:
           msg = "請輸入正確的統編格式";
      break;
   }
   this.setCustomValidity(msg);
})

依照要抓的錯誤訊息類型再去設定內容就可以了，更詳細可以參考影片說明。