この記事では主に HTML5 を使用したフォーム検証の簡単な例を紹介します。これには、携帯電話で共有される小さな例も含まれます。必要な友人は参照してください。
HTML5 は、正規表現を受け入れる form 要素の pattern 属性を提供します。フォームが送信されるとき、この正規表現はフォーム内の値が空でないことを確認するために使用されます。コントロールの値がこの正規表現と一致しない場合は、プロンプト ボックスが表示され、その式は送信されません。提出されています。プロンプト ボックスのテキストは、setCustomValidity メソッドを使用してカスタマイズできます。
たとえば、以下のフォームでは、テキストボックスは本土の携帯電話番号のみを受け入れます。他のものを入力すると送信できません。何も入力されていない場合は、空でないフォームのみが使用されることに注意してください。 、パターンは使用されないため、支援が必要です。しかし、このコードからポップアップ表示されるプロンプトは次のとおりです:
このようなプロンプトテキストを理解できるのはサルだけです。したがって、setCustomValidity メソッドを使用して定義された、よりわかりやすいプロンプト テキストも必要です。 Run
<!DOCTYPE html> <form> <input id="text" pattern="^1[3-9]\d{9}$" required /> <input id="button" type="submit" /> </form>
無効なイベントはフォーム送信イベントの前にトリガーされます。検証が失敗した場合、フォーム送信はトリガーされません。送信時には、最初にすべてのフォーム要素の値が有効かどうかが検証されます。送信に加えて、checkValidity メソッドを手動で呼び出して検証を実行することもできます。 上記の例では、コントロールに固定プロンプトを直接設定するのは、実際にはあまり良いことではありません。たとえば、プロンプトが空の場合、プロンプトが長すぎる場合などです。長すぎる場合や、数字ではない場合などにプロンプトが表示されません。これらのアクションは、プログラムの検証後に CustomValidity を動的に設定することで実現できます。
実際、HTML5 の API は基本的なニーズを満たすことはできても、あまり実用的ではないと思います。
モバイル ページでフォームを送信するときに JavaScript を使用して情報を検証すると、ウィンドウがポップアップ表示され、ユーザー エクスペリエンスが非常に悪いため、HTML5 属性を使用してモバイル ページで検証する別の例を次に示します:
<!DOCTYPE html> <form> <input id="text" pattern="^1[3-9]\d{9}$" required /> <input id="button" type="submit" /> </form> <script> text.oninput=function(){ text.setCustomValidity(""); }; text.oninvalid=function(){ text.setCustomValidity("请不要输入火星的手机号好吗?"); }; </script>
この記事の内容は以上です。他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。
関連する推奨事項:HTML5 モバイル開発による画像圧縮とアップロード機能の実装
HTML5
ローカルファイルにアクセスするメソッドを実装する
以上がHTML5フォーム検証の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。