[轉]HTML5 input 中的 pattern 屬性

列印

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

 

#基本的 form

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

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

#幾個例子

公司統編

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

 

字數不限的英數的密碼限制

<input type="password" pattern="[a-zA-Z0-9]+">

 

至少8~16位英數的密碼限制

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

 

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

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

 

#深入連結

https://html.com/attributes/input-pattern/

 

#備註

這些表單驗證雖然方便,但前端的驗證都是防君子不防小人,主要是方便使用者的操作,要資料完整正確的話,後端的檢查切不可缺。