新年快樂。恭喜自己又活過了一年。
這篇來記一下原生 Html5 就有的網頁表單驗證功能，

基本的 form

最簡單的表單驗證不陌生，只要 form 裡的 input 放個required屬性，那麼觸發 submit 時都會自動檢查該欄位有無填寫，沒有時截斷請求：

1
2
3
4
<form>
  <input type="text" required>
  <button type="submit">Send</button>
</form>

在遠古時代，表單是直接丟給後端，讓 server 說 yes or no 的，偶爾看到 php 裡用preg_match()，到前端繼續在 JS 裡用match()。多虧現在瀏覽器良好生態，直接寫在 html 就能做掉了，只要將 input 包進 form 裡，利用其原生 submit method 自動驗證。

type搭配pattern

input 本身已有很好用的type屬性，可以是 number, email, date, time 等等，端看需求，基本的驗證功能它都做好了，像是type="email"就會檢查 @ 以及 domain，足以勝任大部分的表單應用。

若要更進一步規範 input 的內容，就加上 pattern 屬性。只有在 type 為 text, search, tel, url, email, password 時的 input 生效。

而 pattern 屬性需帶入 Regular Expression (正規表示法)，這個網站有教學與練習。

幾個例子

  • 公司統編

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

  • 至少8位英數的密碼限制

    1
    <input type="password" pattern="[a-zA-Z0-9]{8,}">

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

    1
    <input type="text" pattern="09\d{2}\-?\d{3}\-?\d{3}">

更多範例與運用可以參考：html5pattern.com

參考資料

MDN