HTML5對(duì)于表單有著極大程度的優(yōu)化，無(wú)論是語(yǔ)義，小部件，還是數(shù)據(jù)格式的驗(yàn)證。我猜你肯定會(huì)以瀏覽器兼容作為借口不愿意使用這些“新功能”，但這絕不應(yīng)該成為使你停滯不前的原因，況且還有像Modernizr和ployfill這樣的工具庫(kù)幫助你在不支持Html5的瀏覽器上進(jìn)行回退處理。當(dāng)你真正試著使用這些表單的新功能時(shí)，我保證你會(huì)愛(ài)上它。如果說(shuō)唯一的缺陷，就是提示框的樣式是瀏覽器默認(rèn)的，你無(wú)法改變，好吧，如果你相信瀏覽器廠(chǎng)商的設(shè)計(jì)師的審美水平的話(huà)（我相信他們的設(shè)計(jì)水平比絕大部分普通人要好，如果不考慮風(fēng)格兼容的話(huà)），抓緊學(xué)就對(duì)了！
原生驗(yàn)證
input type
HTML5中為數(shù)據(jù)格式驗(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í)候，如果你輸入的不是電話(huà)號(hào)碼格式，在提交時(shí)也會(huì)被瀏覽器的阻擋并提示錯(cuò)誤信息，type=’tel’在PC端只起到語(yǔ)義的作用，在移動(dòng)端可以使產(chǎn)生的鍵盤(pán)為純數(shù)字鍵盤(pán)，并不能起到數(shù)據(jù)驗(yàn)證的作用。
pattern
你可以使用pattern屬性來(lái)對(duì)瀏覽器不提供原生驗(yàn)證的數(shù)據(jù)格式設(shè)置自定義格式驗(yàn)證。pattern屬性的值是一個(gè)正則表達(dá)式（字符串）：

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

點(diǎn)擊提交時(shí)，如果你輸入的數(shù)據(jù)不符合pattern里面正則的格式，那么瀏覽器會(huì)阻止表單提交，并提示：‘請(qǐng)與所請(qǐng)求的格式保持一致’+ title里的內(nèi)容（小字）。但注意，當(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)，基本就能滿(mǎn)足我們對(duì)表單提交的限定。但HTML5提供了更高級(jí)的功能來(lái)方便我們開(kāi)發(fā)和提升用戶(hù)體驗(yàn)。
約束驗(yàn)證API
默認(rèn)提示信息
像‘請(qǐng)與所請(qǐng)求的格式保持一致’這樣的瀏覽器提示信息字串藏在input DOM對(duì)象的validationMessage屬性里，這個(gè)屬性在大多數(shù)現(xiàn)代的瀏覽器中是只讀的，即不可修改，比如下面的代碼：

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

當(dāng)提交時(shí)，如果Input內(nèi)容為空，那么瀏覽器會(huì)提示‘請(qǐng)?zhí)顚?xiě)此字段’，我們可以在控制臺(tái)把這句話(huà)打印出來(lái)：

var input = document.getElementById('input')
input.validationMessage // =>'請(qǐng)?zhí)顚?xiě)此字段'

如果想修改其中的內(nèi)容，可以調(diào)用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è)該文本框的數(shù)據(jù)是否通過(guò)驗(yàn)證，如果其值為空字串，則表示通過(guò)了驗(yàn)證，否則，表示未通過(guò)，瀏覽器會(huì)把其值作為錯(cuò)誤信息提示給用戶(hù)。所以在原生驗(yàn)證時(shí)，用戶(hù)無(wú)法把validationMessage的值設(shè)置為空字符串。
約束驗(yàn)證API的簡(jiǎn)單實(shí)例
約束驗(yàn)證API是在原生方法之上更靈活的表達(dá)方式，你可以自己設(shè)置數(shù)據(jù)是否通過(guò)，而不借助于正則表達(dá)式。原理很簡(jiǎn)單，通過(guò)if判斷，如果數(shù)據(jù)格式使你滿(mǎn)意，那么你就調(diào)用setCustomValidity使validationMessage的值為空，否則，你就調(diào)用setCustomValidity傳入錯(cuò)誤信息：

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

每次鍵盤(pán)輸入，代碼都會(huì)判斷格式是否正確，然后調(diào)用setCustomValidity設(shè)置validationMessage的值。不要妄想每按下鍵瀏覽器都會(huì)提示你結(jié)果是否正確，瀏覽器只有在點(diǎn)擊提交按鈕的時(shí)候才會(huì)提示validationMessage里的值（如果有的話(huà)）。
如果你還沒(méi)有走思的話(huà)，一定會(huì)問(wèn)，既然這樣，為什么要為input綁定鍵盤(pán)事件，每輸入一下都要進(jìn)行判斷呢？直接為表單綁定提交事件，在提交時(shí)再判斷多好，別急，這么做是有好處的。
隨著輸入判斷格式與樣式
作為用戶(hù)，我們當(dāng)然想在得知我輸入了錯(cuò)誤的格式之后，文本框變紅（或者有別的提示）。而在我每次輸入一個(gè)字符，如果對(duì)了，文本框就恢復(fù)正常。我們可以使用CSS偽類(lèi)來(lái)實(shí)現(xiàn)這個(gè)功能：

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

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

上面的required偽類(lèi)會(huì)給所以必填但值空的input提供一個(gè)黃色的背景色，而下面的invalid偽類(lèi)則會(huì)為所有未通過(guò)驗(yàn)證的input添加一個(gè)2px的紅邊邊。我們現(xiàn)在給我們的Input框加上input類(lèi)即可。
這些偽類(lèi)的判斷條件正與瀏覽器判斷你能否提交表單的條件一樣，看validationMessage里的值，所以，我們上面設(shè)置每次鍵盤(pán)輸入事件都會(huì)觸發(fā)一次判斷從而改變CSS偽類(lèi)樣式的渲染，用意正在于此。
更好的用戶(hù)體驗(yàn)
還有一個(gè)缺點(diǎn)，就是當(dāng)一個(gè)input設(shè)置為required的時(shí)候，在初始化時(shí)，因?yàn)槠浔旧硎强盏?，所以invalid偽類(lèi)會(huì)對(duì)它起作用，這不是我們想看到的，因?yàn)槲覀兪裁催€都沒(méi)有干。
我們可以并在這些偽類(lèi)前加上父選擇器.invalid，這樣，只有在父元素具有invalid類(lèi)時(shí)，這些偽類(lèi)才會(huì)起作用?？梢栽O(shè)置一個(gè)submit事件，在表單提交因驗(yàn)證失敗后，會(huì)觸發(fā)input的invalid事件，給form添加invalid類(lèi)：
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）！