HTML5には、セマンティクス、小さなコンポーネント、またはデータ形式の検証など、フォームの優れた最適化があります。これらの新機能を使用する言い訳としてブラウザの互換性を確実に使用すると思いますが、これが停滞する理由ではありません。実行されました。これらのフォームの新機能を本当に使用しようとするとき、私はあなたがそれに恋をすることを約束します。唯一の欠陥がある場合、プロンプトボックスのスタイルはブラウザによってデフォルトであるため、ブラウザメーカーのデザイナーの審美的レベルを信じている場合は、それを変更することはできません（デザインレベルはほとんどよりも高いと思いますほとんどの普通の人々よりも普通の人、スタイルの互換性を考慮しないなら、良いことです）、急いで学校！
ネイティブ検証入力タイプHTML5は、::などのデータ形式検証に多くのネイティブサポートを提供します。
<入力型= 'メール'/>
[送信]ボタンをクリックすると、入力するフォーマットが電子メールを満たしていない場合、送信できなくなり、ブラウザはエラーメッセージの作成を求めます。
たとえば、Chromeの下：
知らせ：1.送信するときにのみ、ブラウザの検証をトリガーします
2。異なるブラウザの迅速な情報は異なります
3.複数の入力が要件を満たしていない場合、一般的に1つのエラーのみがプロンプトされます。
入力の種類が電話に等しい場合、電話番号形式を入力すると、ブラウザによってブロックされ、セマンティクスの役割が生成されたキーボードを純粋に生成することができます。デジタルキーボード、およびデータ検証に役割を果たしていません。
パターンパターン属性を使用して、ネイティブ検証データ形式を提供せずに、ブラウザのカスタム形式検証を設定できます。パターン属性の値は正規式（文字列）です。
<入力型= 'Tel' pattern = '[0-9] {11}' if（this.value.length> 3）{//判断条件は完全にカスタマイズされています。 input.setcustomvalidity（ ''）}}）;各キーボード入力、コードは形式が正しいかどうかを決定し、setcustomvalidityを呼び出してValueMessageの値を設定します。すべてのキーブラウザが結果が正しいかどうかを促すとは思わないでください。
あなたがそれについて考えていないなら、あなたは間違いなく尋ねます、それ以来、なぜあなたは入力のためにキーボードイベントをバインドする必要があり、あなたは各入力を判断する必要があるのですか？インシデントを直接送信してください。
入力判断形式とスタイルを使用しますもちろん、ユーザーとして、間違った形式を入力したことを知った後、テキストボックスは赤くなります（または他のヒントがあります）。そして、私がキャラクターを入力するたびに、それが正しければ、テキストボックスは通常に戻ります。 CSS擬似クラスを使用して、この関数を実装できます。
入力：必須{background-color：＃ffe14d;} /*この擬似クラスは、ValueMessageプロパティを介して判断されます* /入力：Invalid {Border：2PX Solid Red;}。上記の必要な擬似カテゴリは、必須であるが空の入力に黄色の背景色を提供しますが、以下の無効な擬似クラスは、すべての非登場入力に2pxの赤い側面を追加します。入力クラスを今すぐ入力ボックスに追加できます。
これらの擬似カテゴリの判断条件は、フォームのフォームを送信できるかどうかを判断しています。 - スタイルスタイル。
より良いユーザーエクスペリエンスもう1つの欠点は、入力が必要になると、初期化が空であるため、無効な擬似カテゴリが動作することです。
これらの擬似カテゴリの前に、親選択デバイスを追加できます。送信イベントを設定できます。フォームの提出が提出された後、無効なイベントが検証障害後にトリガーされ、無効なクラスがフォームに追加されます。
form.addeventlistener（ 'invalid'、function（）{this.classname = 'nivalid'}、true）Invaildはフォームのイベントではなく、3番目のパラメーターを設定します。このようにして、それは行われました。
最終インスタンスさて、私たちが学んだ知識を要約し、ベストプラクティスを作成する時が来ました。
<！ {border：2px solid red;} </style> </head> <body> <form id = form> <label> email> email：<入力タイプ=電子メール要求ID =メール> </label> <ラベル> idcard：<<入力ID = idcard> </label> <入力タイプ=送信> </form> <script> var email = document.getElementbyid（ 'email'）; ）; var form.getElementbyid（ 'form'）; } else {this.setcustomvalidity（ ''）}}）;実行後のスクリーンショットは次のとおりです。
上記は、この記事のすべての内容です。