文轉自:https://yuugou727.github.io/blog/2018/02/20/html5-pattern/

#基本的 form

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

<form>

</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 (正規表示法)，這個網站有教學與練習。