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

https://www.minwt.com/webdesign-dev/html/17161.html

表單驗證是件相當麻煩的事，除了要驗證欄位是否有填寫外，還要針對填入的資料格式是否正確，光是一個表單驗證，就相當的傷神，過去得開發各種驗證表單的程式，來解決這惱人的問題，但現在透過HTML5所提供的新屬性後，完全不用寫任何的程式，就可實現表單的驗證。

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

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

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

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

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

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

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

若是室內電話時，再將pattern='\d{4}[\-]\d{6}'變成pattern='\d{2}[\-]\d{8}'，這樣就大功告成了，是不是超EZ的呀！！且完全不用寫到任何的程式，而這麼方便的功能，目前只有Safa ri不支援，其它的瀏覽器皆可正常運行。