HTML5? ??, ??, ??? ?? ?? ? ??? ?? ??? ??? ????. ?? ??? "??? ??"? ???? ?? ?? ??? ???? ???? ??? ???? ????? ??? ??? ??? ???? ? ???. ?? ???? ?? ? ??? ?? Modernizr ? ployfill? ?? ?? ?????? ????. Html5 ??????? ?? ??. ??? ??? ??? ?? ??? ??? ??? ? ??? ??? ???? ?????. ??? ??? ???? ??? ???? ????? ????? ?? ??? ? ??? ????, ???? ???? ????? ?? ??? ????(?? ??? ??? ??? ???? ??? ?????) ???? ?? ???? ??) ??? ???? ???? ???? ? ????. ?? ????!
?? ??? ??
?? ??
HTML5? ??? ?? ??? ??? ?? ??? ?? ??? ?????. ?:

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

?? ??? ??? ? ??? ??? ???? ???? ??? ???? ??? ????? ?? ???? ?????.
?? ?? Chrome???

??:
1. ???? ??? ??? ?? ?????.
2. ???? ??? ???? ????
3. ?? ??? ???? ?? ??? ?? ? ?? ?? ??? ?????. ????? ???? ????? ??? ??? ??? ???????
????? ???. ??? ?? ??? tel? ?? ? ??? ??? ???? ??? ?? ?? ????? ?? ???? Type='tel'? ???? ?? ???? ?????. PC ???? ???? ??? ??? ??? ???? ??? ? ????. ??? ???? ?? ?? ???? ??? ?? ??? ??? ??? ?? ????.
pattern
?? ??? ???? ????? ?? ??? ??? ???? ?? ??? ??? ?? ??? ?? ?? ??? ??? ??? ? ????. ?? ??? ?? ?? ???(???)???:

<input type=&#39;tel&#39; pattern=&#39;[0-9]{11}&#39; title=&#39;請輸入11位電話號碼&#39;>

??? ??? ? ??? ???? ??? ?? ??? ??? ?? ?? ????? ??? ?????. ?: '??? ??? ?? ?????' + ?? ??(?? ??) ??? ??? ??? ??? ?? ??? ????? ??? ???? ?? ?? ??? ?????(????? ? ??? ???? ??? ???? ?????). ? ??? ???? ????? ?? ??? ?????.
HTML ?? ?? ???? ?? ????? ?? ?? ?? ??? ??? ? ????. ??? HTML5? ??? ???? ??? ??? ????? ?? ? ?? ??? ?????.
???? ??? ?? API
?? ???? ???
'??? ??? ?????'? ?? ???? ???? ??? ???? ?? DOM? ??? ????. ??? ??? ?? ? ??? ???? ?? ?????? ?? ?????. ?, ??? ? ????. ?? ?? ?? ???

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

?? ? ?? ???? ?? ?? ?????. , ??? ????? '? ??? ?????'?? ???? ???? ??? ?? ??? ??? ? ????.

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

???? ????? setCustomValidity ?????? ???? ??? ?? ??? ? ??

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

??? ?? HTML ?? ??? ??? ??? ??? ? ??? ??? ? ???? ??? ?? ????. ??? ???? ?????.
??
HTML ?? ?? ???? ??? ?? ??? ??? ???? ??? ??? ???? ??? ????? ??? ?????. ?? ?? ? ????? ??? ?????? ?????. ??? ??? ????? ?? ?? ?? ???? ????? ?????. ??? ?? ?? ?? ???? ??? ?? ??? ?? ? ???? ??? ? ????.
???? ?? API? ??? ?
???? ?? API? ???? ???? ??? ?? ??? ?? ? ??? ??? ??? ? ????. ??? ?? ?????. ??? ??? ?????? setCustomValidity? ???? ??? ?? ??? ?? ?? ???. ??? ??? setCustomValidity? ???? ?? ???? ?????.

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

?? ??? ??? ?? ??? ??? ???? ??? ?? setCustomValidity? ???? ??? ?? ??? ?? ?????. ??? ?? ??? ????? ??? ???? ?? ???? ????? ???? ???. ????? ?? ??? ??? ? ??? ?? ???(?? ??)? ?? ?? ???? ?????.
?? ????? ?????, ?? ???? ? ??? ???? ??? ????? ??? ??? ??? ??? ??? ??? ?? ???. ?? ???? ??? ?? ???? ?? ??? ? ??? ??? ???? ?? ????. ??? ?? ?? ????.
??? ?? ?? ? ??? ??
?? ????? ??? ??? ??? ????? ??? ?? ?? ??? ??? ????? ???? ?? ????? ????? ????. ??? ??? ??? ??? ??? ??? ??? ??? ???? ?????. ? ??? ???? ?? CSS ?? ???? ??? ? ????:

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)槠浔旧硎强盏模詉nvalid偽類會(huì)對它起作用，這不是我們想看到的，因?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的事件，所以這里我們設(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的長度必須為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來檢查表單的輸入數(shù)據(jù)的代碼實(shí)例?的內(nèi)容，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)（www.miracleart.cn）！