HTML5フォーム検証の分析-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5フォーム検証の分析

不言

Jun 14, 2018 am 09:49 AM

html5 形状

この記事では主に 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>

ログイン後にコピー