1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. 免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

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

2017/02/19

梅問題-HTML5教學-免寫程式!HTML5新屬性自動檢測輸入框與欄位格式是否正確

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


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


用法很簡單,只需在input的標籤加入「required」
[html]
<input name="text" id="text" type="text" required />
[/html]


加入後,當未填寫就按送出時,就會跳出提示框。
梅問題-HTML5教學-免寫程式!HTML5新屬性自動檢測輸入框與欄位格式是否正確


當要驗證Email格式時,將type設為「email」,若是網址就為「url」
[html]
<input name="email" id="email" type="email" required />
[/html]


梅問題-HTML5教學-免寫程式!HTML5新屬性自動檢測輸入框與欄位格式是否正確


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

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


若是室內電話時,再將pattern=’\d{4}[-]\d{6}’變成pattern=’\d{2}[-]\d{8}’,這樣就大功告成了,是不是超EZ的呀!!且完全不用寫到任何的程式,而這麼方便的功能,目前只有Safari不支援,其它的瀏覽器皆可正常運行。
梅問題-HTML5教學-免寫程式!HTML5新屬性自動檢測輸入框與欄位格式是否正確


[範例預覽]