新年快樂。恭喜自己又活過了一年。
這篇來記一下原生 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