html5のsetCustomValidityの詳しい紹介

1. デフォルトのプロンプト

html5 は、フォーム検証を強化します。例:

<form>
    <input type=text required />
    <input type=submit></form>

テキストに入力内容がない場合は、送信ボタンをクリックすると、「このフィールドに入力してください」というプロンプトが表示されます。

イベントシーケンスは以下の通り:
(1) 送信ボタンのクリックイベント、デフォルトイベントがキャンセルされると終了します
(2) HTML5 フォーム検証とプロンプト、フォーム検証が失敗した場合、最初の不正な入力は促されて終了します
(3) デフォルトイベントがキャンセルされると、フォームフォームのsubmitイベントは終了します

注:
フォームのsubmitイベントをトリガーするためにjsを使用する場合は、直接入力します。手順 (3) および HTML5 フォーム検証は実行されません。
したがって、HTML5 検証プロンプトを表示したい場合は、送信ボタンを押す必要があります。

2. カスタム プロンプト

setCustomValidity を使用してカスタム プロンプトを設定すると、
validity.customError は true になり、checkValidity は常に false を返します。
さらに、フォーム検証は checkValidity に基づいてプロンプトを表示するかどうかを決定します。

そのため、カスタム プロンプトを設定およびキャンセルするには、次の有効性の 属性 を使用する必要があります:

badInput，customError，patternMismatch，rangeOverflow，rangeUnderflow，stepMismatch，tooLong，
typeMismatch，valid，valueMissing

注:
上記の属性値は読み取り専用であり、手動による変更は無効です。

このうち、カスタムプロンプトをキャンセルする方法は次のとおりです:

setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined)

例:

<form>
    <input id=text1 type=text required />
    <input id=submit1 type=submit></form><script>
    document.querySelector(&#39;#submit1&#39;).addEventListener(&#39;click&#39;,function(){        
    var $text1= document.querySelector(&#39;#text1&#39;);

        $text1.validity.valueMissing
            ?$text1.setCustomValidity(&#39;The value can\&#39;t be empty.&#39;)
            : $text1.setCustomValidity(&#39;&#39;);
    },false);</script>

または:

$text1.setCustomValidity((function(){    
if($text1.validity.valueMissing){       
 return 'The value can\'t be empty.';
    }    //不写return或者写“return;”表示“return undefined;”}()));

3. 検証成功後の Ajax 送信

の submit イベントで、イベントの順序を考慮します。フォーム、フォーム検証に合格した場合にのみ、後でトリガーされます。
そのため、フォームの送信イベントでデフォルトの動作をキャンセルすることで、ajaxを使用してデータを送信できます。

例:

rree

以上がhtml5のsetCustomValidityの詳しい紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。