HTML5フォーム検証の分析

不言
リリース: 2018-06-14 09:49:13
オリジナル
3195 人が閲覧しました

この記事では主に 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 contenteditable 属性分析


HTML5 ローカルファイルにアクセスするメソッドを実装する


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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート