HTML5利用約束驗(yàn)證API來檢查表單的輸入數(shù)據(jù)的代碼實(shí)例

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

原生驗(yàn)證

input type

HTML5中為數(shù)據(jù)格式驗(yàn)證提供了很多原生的支持，例如：

<input type='email'/>

當(dāng)點(diǎn)擊提交按鈕時(shí)，如果你輸入的格式不符合email，則會(huì)導(dǎo)致無法提交，瀏覽器會(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端只起到語義的作用，在移動(dòng)端可以使產(chǎn)生的鍵盤為純數(shù)字鍵盤，并不能起到數(shù)據(jù)驗(yàn)證的作用。

pattern

你可以使用pattern屬性來對(duì)瀏覽器不提供原生驗(yàn)證的數(shù)據(jù)格式設(shè)置自定義格式驗(yàn)證。pattern屬性的值是一個(gè)正則表達(dá)式（字符串）：

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

點(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屬性。

通過HTML原生的驗(yàn)證系統(tǒng)，基本就能滿足我們對(duì)表單提交的限定。但HTML5提供了更高級(jí)的功能來方便我們開發(fā)和提升用戶體驗(yàn)。

約束驗(yàn)證API

默認(rèn)提示信息

像‘請(qǐng)與所請(qǐng)求的格式保持一致’這樣的瀏覽器提示信息字串藏在input DOM對(duì)象的validationMessage屬性里，這個(gè)屬性在大多數(shù)現(xiàn)代的瀏覽器中是只讀的，即不可修改，比如下面的代碼：

<input type="text" required id='input'/>

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

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

如果想修改其中的內(nèi)容，可以調(diào)用setCustomValidity接口改變validationMessage的值

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

注意，像required這樣的HTML原生驗(yàn)證，雖然能改變其中信息，但無法把信息置為空字串，原因下面會(huì)講到。

原理

HTML表單驗(yàn)證系統(tǒng)通過validationMessage屬性檢測(cè)該文本框的數(shù)據(jù)是否通過驗(yàn)證，如果其值為空字串，則表示通過了驗(yàn)證，否則，表示未通過，瀏覽器會(huì)把其值作為錯(cuò)誤信息提示給用戶。所以在原生驗(yàn)證時(shí)，用戶無法把validationMessage的值設(shè)置為空字符串。

約束驗(yàn)證API的簡(jiǎn)單實(shí)例

約束驗(yàn)證API是在原生方法之上更靈活的表達(dá)方式，你可以自己設(shè)置數(shù)據(jù)是否通過，而不借助于正則表達(dá)式。原理很簡(jiǎn)單，通過if判斷，如果數(shù)據(jù)格式使你滿意，那么你就調(diào)用setCustomValidity使validationMessage的值為空，否則，你就調(diào)用setCustomValidity傳入錯(cuò)誤信息：

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

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

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

隨著輸入判斷格式與樣式

作為用戶，我們當(dāng)然想在得知我輸入了錯(cuò)誤的格式之后，文本框變紅（或者有別的提示）。而在我每次輸入一個(gè)字符，如果對(duì)了，文本框就恢復(fù)正常。我們可以使用CSS偽類來實(shí)現(xiàn)這個(gè)功能：

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

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

上面的required偽類會(huì)給所以必填但值空的input提供一個(gè)黃色的背景色，而下面的invalid偽類則會(huì)為所有未通過驗(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('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>

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。