ネイティブJS検証メソッドとcheckValidityなどのフォームの属性の詳細な紹介

まず、フォームの組み込み検証の外部パフォーマンスから始めます

フォームに組み込まれている検証と言えば、多くの人がrequiredそのようなHTML属性を設定することを考えており、フォームが送信されると、そのような迅速な効果が得られます。

フォーム組み込みのプロンプト効果

実際、これは単なる表現であり、フォームのネイティブ検証のほんの一部にすぎません。フォームに組み込まれた検証の本質は、単なる表面的なものではありません。

CSS、例えば、のような多くの側整合擬似クラス有する:required擬似クラス、 :optional擬似クラス又は:valid、:invalid等擬似。

もう1つの例は、フォーム要素を監視'invalid'および'valid'イベントできるJSDOMイベントです。

もう1つの例はJSDOM APIで、これには多くの検証メソッドと属性が組み込まれています。これは、この記事で紹介する知識のポイントです。

2つ目は、フォームフォーム要素に組み込まれている検証メソッドと属性です。

全部で3つのメソッドと1つの属性があります。

3つの方法がありcheckValidity()、 reportValidity()、 setCustomValidity()この方法では、属性があるvalidityプロパティ。

詳細は次のとおりです。

checkValidity（）メソッド

checkValidity()このメソッドを使用して、現在のフォーム制御要素を検証するか、フォーム全体が検証されるかどうか、戻り値がブール値であるtrueか、またはfalse。

たとえば、ドロップダウンボックス要素が検証されているかどうか：

var isSelectPassing = document.querySelector（ 'select'）。checkValidity（）; // trueまたはfalse

または、フォーム要素全体が検証されているかどうか：

var isFormPassing = document.forms [0] .checkValidity（）; // trueまたはfalse

reportValidity（）メソッド

reportValidity()このメソッドは、ブラウザーの組み込みの検証プロンプトの相互作用をトリガーしtrueたり、ブール値を返したりすることができますfalse。例えば：

document.querySelector（ 'select'）。reportValidity（）

次の図に示すように、ドロップダウンボックスのエラープロンプトがトリガーされます。

ドロップダウンボックスの確認プロンプトがトリガーされました

さらに、reportValidity()IEブラウザがサポートしていない方法であるEdge17 +がサポートを開始しました。

setCustomValidity（）メソッド

名前が示すように、カスタム検証を設定するために、このメソッドを使用してプロンプトテキストをカスタマイズできます。

構文は次のとおりです。

ele.setCustomValidity（p）;

その中にstrは、エラーメッセージのテキスト情報を意味する文字列があります。空の文字列の場合は、カスタムエラーメッセージが使用されていないことを意味します。

たとえばreportValidity()、上記の方法のドロップダウンエラーメッセージは、「リストから1つの項目を選択してください」です。

「都市を選択してください」に変更したい場合は、次のことができます。

var eleSelect = document.querySelector（ 'select'）; 
if（eleSelect.validity.valueMissing == true）{ 
    eleSelect.setCustomValidity（ '都市を選択してください'）; 
} 
eleSelect.reportValidity（）;

この時点で、プロンプト効果は次のとおりです。

プロンプトコピー情報を変更する

ValidityプロパティとValidityStateオブジェクト

入力ボックス、ドロップダウンボックス、単一のチェックボックスなど、すべての標準フォームコントロールにvalidityは、現在の要素のさまざまな検証状態を返すことができる読み取り専用プロパティである組み込みプロパティがあります。次に例を示します。

console.dir（document.querySelector（ 'select'）。validity）;

Chromeブラウザで返される結果はValidityStateオブジェクトであり、次のような属性と属性値が含まれています。

badInput：false 
customError：false 
patternMismatch：false 
rangeOverflow：false 
rangeUnderflow：false 
stepMismatch：false 
tooLong：false 
tooShort：false 
typeMismatch：false 
valid：false 
valueMissing：true

コンソール出力のスクリーンショットは次のとおりです。

組み込みの検証ステータスオブジェクト

その中で

badInput

読み取り専用。属性値はブール型です。入力ボックスの値ブラウザは変換できません。たとえば'number'、タイプ入力ボックスに漢字があり（MDNに記載されていますが、セルフテストでは再現できません）、値はこの時点trueです。この属性は、InternetExplorerではサポートされていません。この属性を理解することをお勧めします。

customError

読み取り専用。属性値はブール型です。要素呼び出しsetCustomValidity()メソッドがカスタム認証情報で設定されている場合、値はyestrueです。

patternMismatch

読み取り専用。属性値はブール型です。pattern値は、指定された通常の属性値と一致しない場合trueです。:invalidこのCSS疑似クラスに一致します。

rangeOverflow

読み取り専用。属性値はブール型です。max属性で設定した値を超えた場合になりますtrue。また、CSS:invalidおよび:out-of-range疑似クラスとも一致します。

rangeUnderflow

読み取り専用。属性値はブール型です。minプロパティで設定された値よりも小さい場合になりますtrue。また、CSS:invalidおよび:out-of-range疑似クラスとも一致します。

stepMismatch

読み取り専用。属性値はブール型です。入力ボックスの現在の値がstep属性値と一致しない場合、stepMismatch値はになりますtrue。同時に、要素はCSS:invalidおよび:out-of-range疑似クラスと一致します。

長すぎる

読み取り専用。属性値はブール型です。入力コンテンツの長さがmaxlength制限を超えた場合になりtrueます。また、CSS:invalidおよび:out-of-range疑似クラスとも一致します。

短すぎる

読み取り専用。属性値はブール型です。入力内容の長さが足りない場合はminlength、になりますtrue。また、CSS:invalidおよび:out-of-range疑似クラスとも一致します。この属性は、minlength属性をサポートしていないため、InternetExplorerではサポートされていません。

型の不一致

読み取り専用。属性値はブール型です。属性値は、入力ボックスの値が入力ボックスのタイプと一致しない場合になりますtrue。たとえば、入力ボックスのタイプが電子メールまたはURLの場合。値がyesの場合、このCSS疑似クラスにtrue一致し:invalidます。

有効

読み取り専用。属性値はブール型です。現在の要素は、Shiによって完全に検証されてCSS疑似クラスにtrue一致:validしますが、Shifalseによってで:invalidはなくCSS疑似クラスに一致します。

valueMissing

読み取り専用。属性値はブール型です。要素にrequired属性が設定されていて、入力ボックスの値が空の場合、属性値はtrueです。値がyesの場合、このCSS疑似クラスにtrue一致し:invalidます。

3、IE9ブラウザポリフィル

上記のネイティブフォーム検証方法と属性のすべてがIE9ブラウザーでサポートされているわけではありませんが、両方のIE10 +ブラウザーでサポートされています。

フォームネイティブ検証方法の互換性

IE9ブラウザーをサポートする場合は、ポリフィルを作成する必要があります。おそらく検索checkValidity()しましたが、いくつかの方法に適したポリフィルがありません。既存のプロジェクトの一部はIE8と互換性があり、シムに似ていますが、特別に作成されたものではありません。 IE9。ポリフィル。

ただし、validity属性は、少し信頼できるように見えるポリフィルを検出しました。ここをクリックしてください（右クリック→名前を付けて保存）：validity-polyfill.js。このポリフィルはここから来ていますが、私はその正確さを注意深く検証していません。

後で、IE9ブラウザのcheckValidity()いくつかの方法を入力します。

四、書くと書くは文書になる

この記事の時点で、カスタムフォーム検証ロジックなど、興味深いことがいくつか見つかると思いました。後で、考えすぎていることに気付きました。このsetCustomValidity()方法は、思ったほど強力ではありません。変更する方法です。プロンプトテキスト情報。

整理した後、フォームのネイティブ検証に関するより詳細なドキュメントになりました。

検証コンポーネントを作成した後、これらのネイティブの組み込み検証メソッドを使用してそれを実現します。これにより、多くの労力を節約でき、非常に興味深いものになります。

将来の素晴らしいパフォーマンスは、通常の蓄積から生まれます。

ほとんどの人にとって、この記事のこれらのAPIは無意味です。実際のプロジェクトにどのように適用するかは考えられません。非常に無味です。実際、やることはたくさんあります。すでに試してみたいと思います。