javascript - html5中的input的type屬性已經有tel、number、email的，還需要寫正則去驗證的嗎？

1、html5中的input的type屬性已經有tel、number、email的，還需要寫正則去驗證的嗎？
2、html5中的input的type屬性總共是新增了13個，我把這13個總結了一下，分別是type的這些屬性：color（定義拾色器）、date（定義日期欄位）、datetime（定義日期欄位）、datetime-local（定義日期欄位）、month（定義日期欄位的月）、week（定義日期欄位的周）、time（定義日期欄位的時、分、秒）、email（定義用於 e-mail 地址的文字欄位）、number（定義帶有 spinner 控制項的數字欄位）、range（定義帶有 slider 控制項的數字欄位）、search（定義用於搜尋的文字欄位）、tel（定義用於電話號碼的文字欄位）、url（定義用於 URL 的文字欄位）。
平時在做網站的時候用的很少，大家平時寫的時候直接用這些的呢，還是需要自己去寫正則的，還是用其他標籤的去類比代替的呢？
3、求助一下各位對HTML5新增的這13個type屬性的新看法？

回複內容：

1、html5中的input的type屬性已經有tel、number、email的，還需要寫正則去驗證的嗎？
2、html5中的input的type屬性總共是新增了13個，我把這13個總結了一下，分別是type的這些屬性：color（定義拾色器）、date（定義日期欄位）、datetime（定義日期欄位）、datetime-local（定義日期欄位）、month（定義日期欄位的月）、week（定義日期欄位的周）、time（定義日期欄位的時、分、秒）、email（定義用於 e-mail 地址的文字欄位）、number（定義帶有 spinner 控制項的數字欄位）、range（定義帶有 slider 控制項的數字欄位）、search（定義用於搜尋的文字欄位）、tel（定義用於電話號碼的文字欄位）、url（定義用於 URL 的文字欄位）。
平時在做網站的時候用的很少，大家平時寫的時候直接用這些的呢，還是需要自己去寫正則的，還是用其他標籤的去類比代替的呢？
3、求助一下各位對HTML5新增的這13個type屬性的新看法？

不管前端驗不驗證，後端都一定要驗證。

這些類型只是方便瀏覽器顯示不同的控制項，並且在手機上會調用不同的鍵盤，但本質上都是字串，傳到後端都沒法保證格式的正確。

前端驗證只是使用者體驗更好，不用像後端驗證那樣跳轉頁面（AJAX不用跳轉，但還是要傳輸資料），但是沒法保證資料的有效性。

關於這點需要明確一下
type並不能作為驗證依據,
type欄位只是為輸入提供選擇格式,
更多情況下應該說新增的type是為了適配移動端web app的存在
例如說當type=tel的時候,在手機上開啟頁面會出現電話鍵盤(不是數字鍵台,兩者並不一樣,電話鍵盤還包括*和#)
當type=email的時候,會出現帶@和.com符號的全鍵盤(各設配各系統實現貌似有差異)
所以才要有pattern的存在,
當觸發表單提交的時候,瀏覽器會將輸入與pattern屬性做匹配來最終判斷是否有效輸入
當然了,後端驗證資料有效性就在此問題的範疇之外了

PS 剛剛又試了一下,chrome下當type=email或者type=url的時候,觸發提交,就算沒有pattern也會對輸入內容進行檢查然後提示,但是type=tel卻沒有,Safari下則是全部都沒有進行內容檢查,這就是瀏覽器產商各自實現的差異了,為了保持瀏覽器行為的一致性,都應該加上pattern屬性

作為一個WEB開發人員要考慮 前端使用者輸的資料都是不可信的 都是有可能會有惡意代碼的 後端都要做驗證

前後端驗證不是可選，而是必須的！況且新增的一些屬性在個別手機瀏覽器上存在相容問題！

不考慮後端驗證，只是說前端驗證的話. 該需要驗證的地方還是需要驗證
比如說 html5 type = email，number等瀏覽器給你驗證了， 但是tel就沒有，不知道你是手機號還是有線電話，tel輸入字母也沒有做驗證。
總的來說，按照具體需求彌補缺失的驗證。

@funkyLover 說的挺好。

至於你前兩個問題，我認為取決於你的開發需求：對於輸入的值的格式、以及瀏覽器安全色性，有多麼嚴格的要求？

• 如果資料最終只是用來給人看看而已（比如普通網站的一些個人資訊），並且不用相容早期的瀏覽器，那麼這些type屬性內建的驗證機制就足夠了。

• 反之，如果資料會被機器利用（比如自動發郵件）或者是關鍵資訊（比如中介網站裡的聯絡電話），或者要相容早期瀏覽器（不支援HTML5），那麼需要寫前端驗證功能代碼。

