HTML5フォーム：JavaScriptおよび制約検証API

コアポイント

• HTML5を使用すると、クライアントフォームの検証がJavaScriptエンコードから解放されますが、より複雑なフォームの場合、JavaScriptと制約検証APIを使用してネイティブ検証を強化できます。これは、すべてのブラウザがすべてのHTML5入力タイプとCSSセレクターをサポートしているわけではないなど、いくつかの制限が原因であり、エラーメッセージバブルをスタイリングすることは困難です。
• 制約検証APIは、.willValidate、.checkValidity()、.validity、.setCustomValidity()などのいくつかのメソッドとプロパティを提供します。これらは、フィールドが検証されるかどうか、フィールドが検証され、フィールドの有効性、カスタム有効性メッセージが設定されるかどうかを確認するために使用されます。ただし、すべての属性がすべてのブラウザによってサポートされているわけではありません。
• JavaScriptおよび制約検証APIを使用して、シンプルで普遍的なクロスブラウザーフォーム検証システムを作成できます。このシステムには、ネイティブ検証の無効化、すべてのフィールドをループするために、ネイティブ検証が利用可能かどうか、入力タイプがサポートされているかどうかを確認し、フィールドの有効性を確認し、カスタム有効性メッセージの設定が含まれます。このシステムは、古いブラウザとさまざまな入力タイプをサポートするように適合させることができます。

この記事は、HTML5 Webフォームに関する3部構成のシリーズの最後のものであり、JavaScriptの統合と制約検証APIについて説明します。タグ付きの記事とCSSの記事を読んでいない場合は、まず読んで、これらの概念に精通していることを確認してください。 HTML5を使用すると、JavaScriptコードなしでクライアントフォーム検証を実装できます。ただし、より複雑なフォームを実装する場合、ネイティブ検証を強化する必要があります。

すべてのブラウザは、すべてのHTML5入力タイプとCSSセレクターをサポートしていません

メッセージバブルは共通テキストを使用します（「このフィールドに入力してください」） ユーザーがフォームと対話する前にページがロードされると、
• および
• スタイルが適用されます。
• :invalid一部のJavaScriptコードと制約検証APIは、ユーザーエクスペリエンスを向上させることができます。さまざまなブラウザや入力タイプをサポートしたい場合、これは少し乱雑になる可能性があることに注意してください。 :required

フォームの提出をインターセプト

プロパティを：に設定することにより、ネイティブ検証をオフにする必要があります。

もちろん、これはコードのフィールドエラーを確認する必要があることを意味しますが、すぐにネイティブブラウザの検証を使用することが可能であることがわかります。 noValidate true

field

var form = document.getElementById("myform");
form.noValidate = true;

// 设置处理程序以在提交时验证表单
// onsubmit 用于更轻松的跨浏览器兼容性
form.onsubmit = validateForm;

プロパティ

各入力フィールドには.willValidate属性があります。これは返されます：

• true：ブラウザがネイティブ検証フィールドを配置する場合
• ：ブラウザがフィールドを確認しない場合 false
：ブラウザがIE8などのネイティブHTML5検証をサポートしていない場合。
• undefined
上記のネイティブ検証を無効にしたため、各フィールドは

に戻ります。すべてのフィールドをループし、ネイティブ検証が利用可能かどうかを確認します。

ループイテレーションは、単一のfalseコレクションのすべてのフィールドを表し、ボタンやフィールドセットなどの他のタイプではなく入力であることをチェックします。次の行は非常に重要です... validateForm

var form = document.getElementById("myform");
form.noValidate = true;

// 设置处理程序以在提交时验证表单
// onsubmit 用于更轻松的跨浏览器兼容性
form.onsubmit = validateForm;

およびelementsはどちらも誤った値なので、

を確認することはできません！最初のコードブロック内のコードは、ネイティブ検証で使用できる場合に評価されることがわかりました。しかし...

function validateForm(event) {

    // 获取跨浏览器事件对象和表单节点
    event = (event ? event : window.event);
    var
        form = (event.target ? event.target : event.srcElement),
        f, field, formvalid = true;

    // 循环所有字段
    for (f = 0; f < form.elements.length; f++) {
        // 获取字段
        field = form.elements[f];

        // 忽略按钮、字段集等
        if (field.nodeName !== "INPUT" && field.nodeName !== "TEXTAREA" && field.nodeName !== "SELECT") continue;

        // 原生浏览器验证可用吗？
        if (typeof field.willValidate !== "undefined") {

            // 原生验证可用

        }
        else {

            // 原生验证不可用

        }
    }
}

falseブラウザは入力タイプをサポートしていますか？ undefinedfield.willValidate

最初の部分を読むと、サポートされていない入力タイプがテキストに戻ることを覚えています。たとえば、

Firefox 29またはIE11でのネイティブサポートはありません。これらのブラウザは（効果的に）レンダリングされます：

ただし、両方のブラウザはテキストタイプの検証をサポートしているため、

は

// 原生浏览器验证可用吗？
        if (typeof field.willValidate !== "undefined") {

            // 原生验证可用

        }
        else {

            // 原生验证不可用

        }

に戻りません！したがって、オブジェクトの属性がオブジェクトの属性と一致するかどうかを確認する必要があります - それらが一致しない場合、例えば、レガシーフォールバック検証を実装する必要があります。

<input type="date" name="dob" />

field

method field.willValidateundefined typeネイティブ検証が利用可能な場合は、.typeメソッドを実行してフィールドを確認できます。問題がない場合、メソッドは

を返します。これはあまり有用ではなく、すべてのブラウザーでサポートされていないが、再確認せずに現在の状態を返す

<input type="text" name="dob" />

メソッドもあります。これらの2つの方法も次のとおりです

エラーをより詳細にチェックできるように、フィールドの.checkValidity()オブジェクトを設定します 検証が失敗すると、

イベントがフィールドで発射されます。これは、エラー、色の変更などを表示するために使用できます。対応する

イベントはないことに注意してください。必要に応じてエラースタイルとメッセージをリセットすることを忘れないでください。 .checkValidity() true false.reportValidity()field

object

1. .validityオブジェクトには、次のプロパティがあります。

.valid - フィールドにエラーがない場合はtrueを返し、それ以外の場合はfalseを返します。 .valueMissing - フィールドが必要であるが値が入力されていない場合はtrueを返します。 .typeMismatch - 値が正しい構文でない場合（たとえば、奇形の電子メールアドレス）を返します。 true - 値が.patternMismatch属性の正規表現と一致しない場合はpatternを返します。 true - 値が許可されているよりも長い場合は.tooLongを返します。 maxlength - 値が許可されているtrueよりも短い場合は.tooShortを返します。 minlength - 値がtrueよりも低い場合は、.rangeUnderflowを返します。 min - 値がtrueよりも高い場合は、.rangeOverflowを返します。 max - 値が一致しない場合はtrue、.stepMismatchを返します。 step - エントリを値に変換できない場合、trueに戻ります。 .badInput - フィールドでカスタムエラーが設定されている場合、trueを返します。 .customError trueすべてのプロパティがすべてのブラウザでサポートされているわけではないため、あまりにも多くの仮定をしないように注意してください。ほとんどの場合、エラーメッセージを表示または非表示にするには、

または

の結果である必要があります。 .valid .checkValidity()

（後続のコンテンツは元のテキストと同じで、長さが長すぎるため、ここでは省略されています。必要に応じて、出力コンテンツの長さと詳細を自分で調整してください。）

以上がHTML5フォーム：JavaScriptおよび制約検証APIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。