この記事では、マークアップとスタイルを使用してフィールドをすばやく検証する方法を共有したいと思います。 この方法はクロスブラウザではなく、追加機能としてのみ使用することをお勧めします。 記事の過程で、ブラウザー間の互換性の可能性を減らしますが、機能は向上します。
名前、メール、電話、サイトへのリンクを含む標準フォームを収集してみましょう。数字フィールドで成長を試すことができます。
<form action="#" class="form"> <input type="text" name="name" placeholder="" /> <input type="text" name="email" placeholder="E-Mail" /> <input type="text" name="phone" placeholder="" /> <input type="text" name="url" placeholder=" " /> <input type="text" name="growth" placeholder=" " /> <button type="submit"></button> </form>
HTML5
HTML5標準がもたらした入力フィールドの検証属性を知っている人を驚かせるだけでは十分ではありません。 ただし、これをバイパスしません。この検証方法は、最新のブラウザーで最もサポートされています。
検証する最も簡単な方法は、入力フィールドのタイプを決定し、必須入力を担当する必須属性を設定することです。
<form action="#" class="form"> <input type="text" name="name" placeholder="" required /> <input type="email" name="email" placeholder="E-Mail" /> <input type="tel" name="phone" placeholder="" /> <input type="url" name="url" placeholder=" " /> <input type="number" name="growth" placeholder=" " /> <button type="submit"></button> </form>
これらの2つの属性を使用すると、ネイティブメソッドによる入力情報の検証がはるかに効率的になります。 そしてもちろん、ブラウザによるこれらのプロパティのサポートは最も広範です。
また、 telフィールドのタイプについても述べたいと思います。 ブラウザは電話番号を検証することが期待されますが、いいえ、 telフィールドはオートコンプリートのみに使用されるようになりました。 事実、電話番号の検証は、さまざまな国の電話番号の形式が多すぎるため、非常に複雑なタスクであり、1つのルールで単純に統合して書き留めることはできません。
ただし、 パターン属性は役立ちます。 この属性は、正規表現の値を取ります。 私たちの場合、ロシア連邦で携帯電話を入力するパターンのバリエーションを考えてみてください： +7（123）456-78-91 。 これを行うには、電話でフィールドに単純な正規表現を追加し、文字の最小数と最大数を制限します。
<input type="tel" name="phone" placeholder="" pattern="[\+]\d{1}\s[\(]\d{3}[\)]\s\d{3}[\-]\d{2}[\-]\d{2}" minlength="18" maxlength="18" />
通常、このパターンをマスクと組み合わせて数字を入力しますが、残念ながらここではJSなしではできません。 マスクを使用しない場合、電話の入力にパターンを使用しません。ほとんどの場合、これはユーザーにとってより不便なためです。
パターン属性に対するブラウザのサポートは現在非常に優れています。 バージョン10.3から、iOSはこの機能を完全にサポートします;それ以前は、不正なデータ入力に関するヒントはありませんでした。
また、minlength属性はIE、EDGEではまだサポートされておらず、iOS 10.3でのみ登場したことも考慮する価値があります。 ただし、maxlengthはどこでも非常に長い間サポートされています。 一般に、これで十分です。
また、成長する分野に制限を設けましょう。 私たちのサイトのユーザーが100 cm未満で250 cmを超えることは絶対にできないと仮定すると、次のように記述します。
<input type="number" name="growth" placeholder=" " min="100" max="250" />
ブラウザでこれらの属性がサポートされているため、すべてが問題ありません。
スタイリングに移りましょう！
CSS3
検証をカスタマイズするために、 ：invalidおよび：valid疑似クラスを使用します。 ブラウザでのこれらの擬似クラスのサポートにより、現時点で可能な限り広く使用することができます。
input:invalid {border-color: red;} input:valid {border-color: green;}
習得した知識を活用して適用するようです！ しかし、すべてが見た目ほど単純ではないので、どのように機能するかを確認しましょう。 その結果、すべてのフィールドは最初は空であり、必須フィールドは無効であると見なされますが、残りはすべて有効です。 ユーザーが望むものは、美しくも理解もしやすいものではありません。
ちょっとしたトリックを行って、擬似クラス：placeholder-shownを使用できます。 この擬似クラスを使用して、 プレースホルダー値が現在入力フィールドに表示されているかどうかを判断できます。 プレースホルダー属性は、フィールドに何も入力されていない場合にのみ表示されます。 したがって、この擬似クラスを適用するには、プロパティを：notで逆にするだけです。 その結果、次の設計が得られます。
input:invalid:not(:placeholder-shown) {border-color: red;} input:valid:not(:placeholder-shown) {border-color: green;}
逐語的に読むと、フィールドが無効で、プレースホルダー属性の値が表示されていないときに、入力色の境界線を赤で塗りつぶします。 フィールドにプレースホルダー属性がない場合、単純にスペースを入れることができます：
<input type="text" placeholder=" " />
このメソッドにはマイナス1つしかありません：サポート。 IE：EDGEを除くすべてのブラウザで、プレースホルダーに表示される擬似要素がサポートされています。 幸いなことに、このような欠陥はありません。
たとえば、上記のすべてをCodePenでスケッチし、いくつかの機能を追加しました。
まとめ
したがって、JSに頼らずに、CSSの2行を使用してフォームのスタイルと検証を行うことができました。 現時点では、この設計はほとんどのブラウザでうまく機能しますが、残念ながら、いつものように、Web開発はMicrosoftに失敗します。