網頁設計, 網頁資源

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

梅干2017/02/20
梅問題-HTML5教學-免寫程式!HTML5新屬性自動檢測輸入框與欄位格式是否正確
  表單驗證是件相當麻煩的事,除了要驗證欄位是否有填寫外,還要針對填入的資料格式是否正確,光是一個表單驗證,就相當的傷神,因此很早之前,也曾分享過一些驗表單的javascript套件,來解決這惱人的問題,但現在透過HTML5所提供的新屬性後,完全不用寫任何的程式,就可實現表單的驗證。
  甚至還可審核資料格的是否正確,像是Email、網址、電話.....等,因此有表單驗證需求的朋友,現在也一塊來看看HTML5的個表單驗證要如何使用,與格式驗證的設定。
用法很簡單,只需在input的標籤加入「required」
<input name="text" id="text" type="text" required />

加入後,當未填寫就按送出時,就會跳出提示框。梅問題-HTML5教學-免寫程式!HTML5新屬性自動檢測輸入框與欄位格式是否正確
當要驗證Email格式時,將type設為「email」,若是網址就為「url」
<input name="email" id="email" type="email" required />

梅問題-HTML5教學-免寫程式!HTML5新屬性自動檢測輸入框與欄位格式是否正確
除了驗證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不支援,其它的瀏覽器皆可正常運行。梅問題-HTML5教學-免寫程式!HTML5新屬性自動檢測輸入框與欄位格式是否正確
[範例預覽]
UAG軍規iPhone防摔殼