HTML5對(duì)於表單有著極大程度的最佳化，無(wú)論是語(yǔ)義，小部件，還是資料格式的驗(yàn)證。我猜你肯定會(huì)以瀏覽器兼容作為藉口不願(yuàn)意使用這些“新功能”，但這絕不應(yīng)該成為使你停滯不前的原因，況且還有像Modernizr和ployfill這樣的工具庫(kù)幫助你在不支持Html5的瀏覽器上進(jìn)行回退處理。當(dāng)你真正試著使用這些表單的新功能時(shí)，我保證你會(huì)愛上它。如果說(shuō)唯一的缺陷，就是提示框的樣式是瀏覽器預(yù)設(shè)的，你無(wú)法改變，好吧，如果你相信瀏覽器廠商的設(shè)計(jì)師的審美水平的話（我相信他們的設(shè)計(jì)水平比絕大部分普通人要好，如果不考慮風(fēng)格兼容的話），抓緊學(xué)就對(duì)了！
原生驗(yàn)證
input type
HTML5中為資料格式驗(yàn)證提供了許多原生的支持，例如：

<input type=&#39;email&#39;/>

當(dāng)點(diǎn)擊提交按鈕時(shí)，如果你輸入的格式不符合email，會(huì)導(dǎo)致無(wú)法提交，瀏覽器會(huì)提示你錯(cuò)誤訊息。
例如在chrome下：

注意：
1、僅當(dāng)你提交的時(shí)候會(huì)觸發(fā)瀏覽器的驗(yàn)證
2、不同瀏覽器提示訊息的行為樣式不一樣
3、當(dāng)有多個(gè)input不符合要求時(shí)，只會(huì)提示一個(gè)錯(cuò)誤，一般會(huì)提示表單中相對(duì)較前的Input的
不要理所應(yīng)當(dāng)?shù)恼J(rèn)為當(dāng)input的type等於tel的時(shí)候，如果你輸入的不是電話號(hào)碼格式，在提交時(shí)也會(huì)被瀏覽器的阻擋並提示錯(cuò)誤訊息，type='tel'在PC端只起到語(yǔ)義的作用，在行動(dòng)端可以使產(chǎn)生的鍵盤為純數(shù)字鍵盤，並不能起到數(shù)據(jù)驗(yàn)證的作用。
pattern
你可以使用pattern屬性來(lái)對(duì)瀏覽器不提供原生驗(yàn)證的資料格式設(shè)定自訂格式驗(yàn)證。 pattern屬性的值是一個(gè)正規(guī)表示式（字串）：

<input type=&#39;tel&#39; pattern=&#39;[0-9]{11}&#39; title=&#39;請(qǐng)輸入11位電話號(hào)碼&#39;>

點(diǎn)擊提交時(shí)，如果你輸入的資料不符合pattern裡面正則的格式，那麼瀏覽器會(huì)阻止表單提交，並提示：'請(qǐng)與所要求的格式保持一致'+ title裡的內(nèi)容（小字）。但請(qǐng)注意，當(dāng)你的文字方塊中內(nèi)容為空的時(shí)候，瀏覽器不會(huì)對(duì)其進(jìn)行檢查，會(huì)直接提交表單（因?yàn)闉g覽器認(rèn)為這個(gè)框框不是必填項(xiàng)）。如果你想要這個(gè)框框必須有內(nèi)容，請(qǐng)加上required屬性。
透過(guò)HTML原生的驗(yàn)證系統(tǒng)，基本就能滿足我們對(duì)表單提交的限定。但HTML5提供了更進(jìn)階的功能來(lái)方便我們開發(fā)和提升使用者體驗(yàn)。
約束驗(yàn)證API
預(yù)設(shè)提示訊息
像'請(qǐng)與所要求的格式保持一致'這樣的瀏覽器提示訊息字串藏在input DOM物件的validationMessage屬性裡，這個(gè)屬性在大多數(shù)現(xiàn)代的瀏覽器中是唯讀的，即不可修改，例如下面的程式碼：

<input type="text" required id=&#39;input&#39;/>

當(dāng)提交時(shí)，如果Input內(nèi)容為空，那麼瀏覽器會(huì)提示'請(qǐng)?zhí)顚懘藱谖?，我們可以在控制臺(tái)把這句話印出來(lái)：

var input = document.getElementById('input')
input.validationMessage // =>'請(qǐng)?zhí)顚懘俗侄?amp;#39;

如果想修改其中的內(nèi)容，可以呼叫setCustomValidity介面改變validationMessage的值

input.setCustomValidity('這個(gè)字段必須填上哦');
// 下面這種做法適用于不支持setCustomValidity的瀏覽器，基本現(xiàn)代瀏覽器都不支持這樣做
input.validationMessage = '這個(gè)字段必須填上哦'

注意，像required這樣的HTML原生驗(yàn)證，雖然能改變其中信息，但無(wú)法把信息置為空字符串，原因下面會(huì)講到。
原理
HTML表單驗(yàn)證系統(tǒng)透過(guò)validationMessage屬性偵測(cè)該文字方塊的資料是否經(jīng)過(guò)驗(yàn)證，如果其值為空字符串，則表示通過(guò)了驗(yàn)證，否則，表示未通過(guò)，瀏覽器會(huì)把其值作為錯(cuò)誤訊息提示給使用者。所以在原生驗(yàn)證時(shí)，使用者無(wú)法把validationMessage的值設(shè)定為空字串。
約束驗(yàn)證API的簡(jiǎn)單實(shí)例
約束驗(yàn)證API是在原生方法之上更靈活的表達(dá)方式，你可以自己設(shè)定資料是否通過(guò)，而不借助於正規(guī)表示式。原理很簡(jiǎn)單，透過(guò)if判斷，如果資料格式讓你滿意，那麼你就呼叫setCustomValidity使validationMessage的值為空，否則，你就呼叫setCustomValidity傳入錯(cuò)誤訊息：
##

input.addEventListener('input', function () {
        if(this.value.length > 3){ // 判斷條件完全自定義
            input.setCustomValidity('格式不正確');
        }else {
            input.setCustomValidity('')
        }
 });

每次鍵盤輸入，程式碼都會(huì)判斷格式是否正確，然後呼叫setCustomValidity設(shè)定validationMessage的值。不要妄想每按下鍵瀏覽器都會(huì)提示你結(jié)果是否正確，瀏覽器只有在點(diǎn)擊提交按鈕的時(shí)候才會(huì)提示validationMessage裡的值（如果有的話）。

如果你還沒走思的話，一定會(huì)問，既然這樣，為什麼要為input綁定鍵盤事件，每輸入一下都要進(jìn)行判斷呢？直接為表單綁定提交事件，在提交時(shí)再判斷多好，別急，這麼做是有好處的。

隨著輸入判斷格式與樣式作為用戶，我們當(dāng)然想在得知我輸入了錯(cuò)誤的格式之後，文字方塊變紅（或有別的提示）。而在我每次輸入一個(gè)字符，如果對(duì)了，文字方塊就恢復(fù)正常。我們可以使用CSS偽類別來(lái)實(shí)作這個(gè)功能：

input:required {
            background-color: #FFE14D;
        }

    /*這個(gè)偽類通過(guò)validationMessage屬性進(jìn)行判斷*/
    input:invalid {
        border: 2px solid red;
    }

上面的required偽類會(huì)給所以必填但值空的input提供一個(gè)黃色的背景色，而下面的invalid偽類則會(huì)為所有未通過(guò)驗(yàn)證的input添加一個(gè)2px的紅邊邊。我們現(xiàn)在給我們的Input框加上input類即可。
這些偽類的判斷條件正與瀏覽器判斷你能否提交表單的條件一樣，看validationMessage里的值，所以，我們上面設(shè)置每次鍵盤輸入事件都會(huì)觸發(fā)一次判斷從而改變CSS偽類樣式的渲染，用意正在于此。
更好的用戶體驗(yàn)
還有一個(gè)缺點(diǎn)，就是當(dāng)一個(gè)input設(shè)置為required的時(shí)候，在初始化時(shí)，因?yàn)槠浔旧硎强盏?，所以invalid偽類會(huì)對(duì)它起作用，這不是我們想看到的，因?yàn)槲覀兪裁催€都沒有干。
我們可以并在這些偽類前加上父選擇器.invalid，這樣，只有在父元素具有invalid類時(shí)，這些偽類才會(huì)起作用?？梢栽O(shè)置一個(gè)submit事件，在表單提交因驗(yàn)證失敗后，會(huì)觸發(fā)input的invalid事件，給form添加invalid類：
form.addEventListener('invalid'， function() {this.className = 'invalid'}， true)因?yàn)閕nvaild是Input的事件，而不是form的事件，所以這里我們?cè)O(shè)置第三個(gè)參數(shù)為true采用事件捕獲的方式處理之。這樣，就大功告成了。
最終實(shí)例
好了，現(xiàn)在是時(shí)候總結(jié)一下我們所學(xué)的知識(shí)并創(chuàng)造最佳實(shí)踐了：

<!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(&#39;email&#39;);
    var IDCard = document.getElementById(&#39;IDCard&#39;);
    var form = document.getElementById(&#39;form&#39;);

    IDCard.addEventListener(&#39;input&#39;, function () {
        if(this.value.length != 6) {
            this.setCustomValidity(&#39;IDCard的長(zhǎng)度必須為6&#39;)
        }else{
            this.setCustomValidity(&#39;&#39;)
        }
    });

    form.addEventListener(&#39;invalid&#39;, function () {
        this.className = &#39;invalid&#39;;
    }, true)
</script>
</body>
</html>

運(yùn)行后截圖如下：

以上就是HTML5利用約束驗(yàn)證API來(lái)檢查表單的輸入數(shù)據(jù)的代碼實(shí)例?的內(nèi)容，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)（www.miracleart.cn）！