HTML5新屬性自動檢核表單與欄位格式是否填寫正確

參考網址:梅問題
參考網址:The art of web
參考網址:w3cplus pattern–HTML5的表单验证属性

表單驗證是件相當麻煩的事,除了要驗證欄位是否有填寫外,還要針對填入的資料格式是否正確,光是一個表單驗證,就相當的傷神,因此很早之前,也曾分享過一些驗表單的javascript套件,來解決這惱人的問題,但現在透過HTML5所提供的新屬性後,完全不用寫任何的程式,就可實現表單的驗證。

甚至還可審核資料格的是否正確,像是Email、網址、電話…..等,因此有表單驗證需求的朋友,現在也一塊來看看HTML5的個表單驗證要如何使用,與格式驗證的設定。

用法很簡單,只需在input的標籤加入「required」

<input name="text" id="text" type="text" required />

加入後,當未填寫就按送出時,就會跳出提示框。

當要驗證Email格式時,將type設為「email」,若是網址就為「url」

<input name="email" id="email" type="email" required />

除了驗證email與網址外,電話也是很重要的,由於電話編碼每個國家都不同,因此就不能透過type來作設定,而是用pattern這屬性,再加入正規表示法來作驗證,以手機來說,前四碼為電信商,後六碼為個人碼,所以可以這樣子寫 pattern='\d{4}[\-]\d{6}',這表示前方四碼輸入完後,需加入-隔開,再輸入六碼,這樣格式才正確。

<input name="mobile" id="mobile" pattern='\d{4}[\-]\d{6}' required />

若是室內電話時,再將pattern='\d{4}[\-]\d{6}'變成pattern='\d{2}[\-]\d{8}',這樣就大功告成了,是不是超EZ的呀!!且完全不用寫到任何的程式。

而這麼方便的功能,目前只有Safari不支援,其它的瀏覽器皆可正常運行。

 

本篇發表於 程式設計。將永久鏈結加入書籤。