H5 フォーム検証失敗プロンプトを設定する方法

今回は、H5のフォーム検証失敗プロンプトの設定方法を紹介します。 H5のフォーム検証失敗プロンプトを設定する際の注意点

とは何ですか?実際のケースを見てみましょう。

前書き

フロントエンドの子供たちがページを書いているとき、彼らは必然的にフォーム検証の穴に足を踏み入れることになります。このとき、私たちは大量のjsを書かなければならないので、ひざまずかなければなりません。しかし、H5 の登場以降、次のような多くの一般的な式検証が実装され、負担が大幅に軽減されました:

nbsp;html>


    <meta>
    <title>Test</title>


    

                     邮箱:                        

メール検証は H5 です。それ自体はサポートされていますが、検証したいシナリオや状況が多様であるため、もう一度 JS を使用する必要がありますか? もちろん、H5 には pattern 属性が用意されているため、独自の処理を行うことができます。パターン 正規表現 で指定できます。正規表現が適切に記述されている限り、検証について心配する必要はありません

正規表現は 11 桁に制限されています:

nbsp;html>


    <meta>
    <title>Test</title>


    

                     数字:                        

質問

11桁以外の数字を入力するとエラーが報告されますが、これは厄介な現象を発見したのでしょうか？パターンを使用してフォームを検証します。検証が失敗した場合は、「要求された形式が一致している必要があります。」というプロンプトが表示されます。要求された形式が何であるかをユーザーに確認させることはできません。もしそうなら、私たちはページを書く必要さえなく、ただ彼らにお金を支払ってもらうだけです

問題があれば、私たちがしなければなりません。長い間 Google 向けにプログラミングを行った結果、最終的に良い解決策を見つけました: oninvalid: 送信された入力要素の値は、値が無効な場合 (ここでは通常の検証が失敗します)、

oninvalid

イベント

がトリガーされます。 oninvalid は Form イベントに属します。

setCustomValidity(): これは、プロンプト情報をカスタマイズするために使用される HTML5 の組み込みメソッドです。

次のようにソース コードを変更するのは簡単です。

nbsp;html>


    <meta>
    <title>Test</title>


    

                     数字:                        

結果:

ついに、フォーム検証プロンプトで、ここに入力すべきデータの種類が明確に示されるようになり、ユーザーが入力をより適切に修正できるようになりました。この記事の事例を読んだ後は、この方法を習得したと考えてください。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ローカルストレージとセッションストレージの使用記録

Indexeddb データベースの使用方法の詳細な説明

以上がH5 フォーム検証失敗プロンプトを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。