HTML5對於表單有著極大程度的優化，無論是語義，小部件，還是數據格式的驗證。我猜你肯定會以瀏覽器兼容作為藉口不願意使用這些新功能，但這絕不應該成為使你停滯不前的原因，況且還有像Modernizr和ployfill這樣的工具庫幫助你在不支持Html5的瀏覽器上進行回退處理。當你真正試著使用這些表單的新功能時，我保證你會愛上它。如果說唯一的缺陷，就是提示框的樣式是瀏覽器默認的，你無法改變，好吧，如果你相信瀏覽器廠商的設計師的審美水平的話（我相信他們的設計水平比絕大部分普通人要好，如果不考慮風格兼容的話），抓緊學就對了！
原生驗證input typeHTML5中為數據格式驗證提供了很多原生的支持，例如：
<input type='email'/>
當點擊提交按鈕時，如果你輸入的格式不符合email，則會導致無法提交，瀏覽器會提示你錯誤信息。
比如在chrome下：
注意：1、僅當你提交的時候會觸發瀏覽器的驗證
2、不同瀏覽器提示信息的行為樣式不一樣
3、當有多個input不符合要求時，只會提示一個錯誤，一般會提示表單中相對較前的Input的
不要理所應當的認為當input的type等於tel的時候，如果你輸入的不是電話號碼格式，在提交時也會被瀏覽器的阻擋並提示錯誤信息，type= 'tel '在PC端只起到語義的作用，在移動端可以使產生的鍵盤為純數字鍵盤，並不能起到數據驗證的作用。
pattern你可以使用pattern屬性來對瀏覽器不提供原生驗證的數據格式設置自定義格式驗證。 pattern屬性的值是一個正則表達式（字符串）：
<input type='tel' pattern='[0-9]{11}' if(this.value.length > 3){ // 判斷條件完全自定義input.setCustomValidity('格式不正確'); }else { input.setCustomValidity('') } });每次鍵盤輸入，代碼都會判斷格式是否正確，然後調用setCustomValidity設置validationMessage的值。不要妄想每按下鍵瀏覽器都會提示你結果是否正確，瀏覽器只有在點擊提交按鈕的時候才會提示validationMessage裡的值（如果有的話）。
如果你還沒有走思的話，一定會問，既然這樣，為什麼要為input綁定鍵盤事件，每輸入一下都要進行判斷呢？直接為表單綁定提交事件，在提交時再判斷多好，別急，這麼做是有好處的。
隨著輸入判斷格式與樣式作為用戶，我們當然想在得知我輸入了錯誤的格式之後，文本框變紅（或者有別的提示）。而在我每次輸入一個字符，如果對了，文本框就恢復正常。我們可以使用CSS偽類來實現這個功能：
input:required { background-color: #FFE14D; } /*這個偽類通過validationMessage屬性進行判斷*/ input:invalid { border: 2px solid red; }上面的required偽類會給所以必填但值空的input提供一個黃色的背景色，而下面的invalid偽類則會為所有未通過驗證的input添加一個2px的紅邊邊。我們現在給我們的Input框加上input類即可。
這些偽類的判斷條件正與瀏覽器判斷你能否提交表單的條件一樣，看validationMessage裡的值，所以，我們上面設置每次鍵盤輸入事件都會觸發一次判斷從而改變CSS偽類樣式的渲染，用意正在於此。
更好的用戶體驗還有一個缺點，就是當一個input設置為required的時候，在初始化時，因為其本身是空的，所以invalid偽類會對它起作用，這不是我們想看到的，因為我們什麼還都沒有幹。
我們可以並在這些偽類前加上父選擇器.invalid，這樣，只有在父元素具有invalid類時，這些偽類才會起作用。可以設置一個submit事件，在表單提交因驗證失敗後，會觸發input的invalid事件，給form添加invalid類：
form.addEventListener('invalid'， function() {this.className = 'invalid'}， true)因為invaild是Input的事件，而不是form的事件，所以這裡我們設置第三個參數為true採用事件捕獲的方式處理之。這樣，就大功告成了。
最終實例好了，現在是時候總結一下我們所學的知識並創造最佳實踐了：
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>form</title> <style> input:required{ background-color: #DCD4CE; } .invalid input:invalid { border: 2px solid red; } </style></head><body><form id=form> <label>email:<input type=email required id=email></label> <label>IDCard:< input required id=IDCard></label> <input type=submit id=submit></form><script> var email = document.getElementById('email'); var IDCard = document.getElementById('IDCard'); var form = document.getElementById('form'); IDCard.addEventListener('input', function () { if(this.value.length != 6) { this.setCustomValidity('IDCard的長度必須為6') } else{ this.setCustomValidity('') } }); form.addEventListener('invalid', function () { this.className = 'invalid'; }, true)</script></body></html>運行後截圖如下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。