HTML5 では、セマンティクス、ウィジェット、データ形式の検証など、フォームが高度に最適化されています。これらの「新機(jī)能」を使用しない言い訳としてブラウザーの互換性を使用することは間違いないと思いますが、それが停滯の理由になるはずはありません。さらに、サポートされていない場(chǎng)合に役立つ Modernizr や ployfill などのツール ライブラリもあります。 HTML5 ブラウザでのフォールバック処理。これらの新しいフォーム機(jī)能を?qū)g際に試してみると、きっとその虜になるでしょう。唯一の欠點(diǎn)が、プロンプト ボックスのスタイルがブラウザのデフォルトであり、変更できないことである場(chǎng)合、ブラウザ メーカーのデザイナーの美的レベルを信じるのであれば、ブラウザ メーカーのデザイン レベルはそれよりも優(yōu)れていると信じています。スタイルの互換性を考慮しないのであれば、すぐに學(xué)習(xí)してください。
ネイティブ検証
入力タイプ
HTML5 は、次のようなデータ形式検証のための多くのネイティブ サポートを提供します。

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

送信ボタンをクリックすると、入力した形式が電子メールと一致しない場(chǎng)合、送信に失敗すると、ブラウザにエラー メッセージが表示されます。
例: Chrome の場(chǎng)合:

注:
1. ブラウザーの検証は、送信した場(chǎng)合にのみトリガーされます
2. ブラウザーごとにプロンプ??ト情報(bào)の動(dòng)作スタイルが異なります
3. 複數(shù)の入力がある場(chǎng)合、要件が満たされている場(chǎng)合は、入力タイプが tel に一致しない場(chǎng)合、通常、フォームの比較的早い入力が求められます。電話番號(hào)形式では、送信時(shí)に表示されず、ブラウザによってブロックされ、エラー メッセージが表示されます。これは、モバイル側(cè)でのみ役割を果たします。生成されたキーボードは純粋な數(shù)字キーボードであり、データ検証の役割を果たすことはできません。

pattern pattern 屬性を使用して、ブラウザーがネイティブ検証を提供しないデータ形式に対してカスタム形式検証を設(shè)定できます。 pattern 屬性の値は正規(guī)表現(xiàn) (文字列) です:

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

[送信] をクリックすると、入力したデータがパターン內(nèi)の正規(guī)形式に準(zhǔn)拠していない場(chǎng)合、ブラウザはフォームの送信を妨げ、プロンプトを表示します。 : 「リクエストの形式は一貫しています」+タイトルの內(nèi)容（小さい文字）を連絡(luò)してください。ただし、テキスト ボックスの內(nèi)容が空の場(chǎng)合、ブラウザはそれをチェックせず、フォームを直接送信することに注意してください (ブラウザはこのボックスが不要であると判斷するため)。このボックスにコンテンツを含める場(chǎng)合は、必須屬性を追加します。

HTML ネイティブ検証システムを通じて、基本的にフォーム送信に関する制限を満たすことができます。しかし、HTML5 は開(kāi)発を容易にし、ユーザー エクスペリエンスを向上させるためのより高度な機(jī)能を提供します。

制約検証 API
デフォルトのプロンプトメッセージ「要求された形式と一致してください」のようなブラウザプロンプトメッセージ文字列は、入力 DOM オブジェクトの validationMessage 屬性に隠されています。この屬性は、ほとんどの最新のブラウザで使用されます。読み取り専用、つまり変更できません。たとえば、次のコード:

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

送信時(shí)に、入力コンテンツが空の場(chǎng)合、ブラウザーは「このフィールドに入力してください」というプロンプトを表示します。コンソールで出力します:

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

コンテンツを変更したい場(chǎng)合は、setCustomValidity インターフェースを呼び出して validationMessage の値を変更できます

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

必須のような HTML ネイティブ検証では情報(bào)を変更できますが、変更できないことに注意してください。情報(bào)を空の文字列に設(shè)定します。その理由については後述します。

原則 HTML フォーム検証システムは、validationMessage 屬性を使用して、テキスト ボックス內(nèi)のデータが検証に合格したかどうかを検出します。その値が空の文字列の場(chǎng)合は、検証に合格したことを意味します。それ以外の場(chǎng)合は、検証に合格しなかったことを意味します。 、ブラウザはその値をエラーとして扱い、ユーザーに情報(bào)を要求します。したがって、ネイティブ検証中に、ユーザーは validationMessage の値を空の文字列に設(shè)定できません。

制約検証 API の簡(jiǎn)単な例制約検証 API は、ネイティブ メソッドに加えて、より柔軟な式であり、正規(guī)表現(xiàn)に頼らずにデータを渡すかどうかを設(shè)定できます。原則は非常に簡(jiǎn)単で、データ形式が満足できる場(chǎng)合は setCustomValidity を呼び出して validationMessage の値を空にし、そうでない場(chǎng)合は setCustomValidity を呼び出してエラー メッセージを渡します:

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

キーボードが操作されるたびに入力するとコードが判定され、形式が正しいかどうかを確認(rèn)し、setCustomValidity を呼び出して validationMessage の値を設(shè)定します。ボタンを押すたびに、ブラウザーが結(jié)果が正しいかどうかを?qū)い亭毳抓恁螗抓趣虮硎兢工毪趣舷蓼辘蓼护?。ブラウザーは、送信ボタンをクリックしたときに、validationMessage の値 (存在する場(chǎng)合) のみをプロンプトします。

まだ考えたことがない方は、この場(chǎng)合、なぜキーボード イベントを入力にバインドし、入力のたびに判定する必要があるのか??と疑問(wèn)に思うでしょう。送信イベントをフォームに直接バインドし、送信時(shí)にそれがどの程度優(yōu)れているかを判斷することは有益です。心配しないでください。

入力が入力されたときに形式とスタイルを判斷するユーザーとしては、間違った形式を入力したことを知った後、テキストボックスが赤くなる（または他のプロンプトが表示される）ことを當(dāng)然望んでいます。文字を入力するたびに、それが正しければ、テキスト ボックスは通常の狀態(tài)に戻ります。 CSS 疑似クラスを使用してこの機(jī)能を?qū)g現(xiàn)できます:

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è)置每次鍵盤(pán)輸入事件都會(huì)觸發(fā)一次判斷從而改變CSS偽類樣式的渲染，用意正在于此。
更好的用戶體驗(yàn)
還有一個(gè)缺點(diǎn)，就是當(dāng)一個(gè)input設(shè)置為required的時(shí)候，在初始化時(shí)，因?yàn)槠浔旧硎强盏?，所以invalid偽類會(huì)對(duì)它起作用，這不是我們想看到的，因?yàn)槲覀兪裁催€都沒(méi)有干。
我們可以并在這些偽類前加上父選擇器.invalid，這樣，只有在父元素具有invalid類時(shí)，這些偽類才會(huì)起作用。可以設(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）！