フォーム validation_html/css_WEB-ITnose を実装する純粋な CSS

皆さん、フォーム検証を行っていますか?クライアントまたはサーバー、JavaScript または JQuery、手書きまたはプラグインの使用。今日は、CSS セレクター レベル 4 のフォーム関連の疑似クラス セレクターを学習するために、純粋な CSS を使用してフォーム検証を実装する方法を検討します。

ケースの感謝

codepen にもコードを入れました。オンラインで学習したり、コレクション用にダウンロードしたりできます。

ナレッジ分析

重要なのは、CSS セレクター レベル 4 でいくつかの疑似クラスを使用してフォーム検証を実装することです。

:valid と :invalid

:read-only と :read-write

上記の例では、:in-range と :out-of-range を使用しています。それぞれについて説明します。

:required および :optional

:required は、input、select、textarea などの required 属性を持つフォーム要素を選択できます。たとえば、次の要素が選択されます。

<input type="name" required><input type="checkbox" required><input type="email" required><!-- and other input types as well.. --><textarea name="name" id="message" cols="30" rows="10" required></textarea><select name="nm" id="sel" required>    <!-- options --></select>

:optional は、必須の属性を持たないフォーム要素を選択します。これらの 2 つの疑似クラスを使用すると、次の興味深い効果を実現できます。コードは codepen にも配置されています。オンラインで調べるか、ダウンロードして収集するかはあなた次第です。

このコードは主に、required と :optional という 2 つの疑似クラスを使用して、必須フォームとオプション フォームに異なるスタイルと異なるプロンプト テキストを実装します。コアコードを以下に示します。

/*可选表单样式*/input:optional,select:optional { border-right: 3px solid #888; background-color: #f8f8f8; color: #888; }/*必选表单样式*/input:required,textarea:required { border-right: 3px solid #aa0088; }/*可选表单提示文字*/input:optional+label::after{ content:"(可选)"; }/*必选表单提示文字*/input:required+label::after{ content:"(必填)"; }/*可选表单激活效果*/input:optional:focus,select:optional:focus { box-shadow: 0 0 2px 1px #aaa; }/*必选表单激活效果*/input:required:focus,select:required:focus,textarea:required:focus { outline: 0; box-shadow: 0 0 2px 1px #aa0088; }

:in-range と out-of-range

これら 2 つの疑似クラスは、それぞれ範囲内と範囲外のフォーム属性値を選択します。これらの 2 つの疑似クラスは、数値範囲を受け入れる要素で使用できます。たとえば、タイプ番号が付いたフォームやスライダーなどです。ケースの効果については、上記の「ケースの説明」セクションで説明します。ここでは、2 つの疑似クラスの使用法を誰もが理解できるように、コア コードのみを示します。

input:out-of-range{ border: 1px solid tomato; }input:in-range~ label::after { content: "输入一个正确的从1到10的数字"; }input:out-of-range ~ label::after { content: "枣糕，你傻了！"; }

:valid と :invalid

これら 2 つの疑似クラスは、type を持つ入力フォーム用に設計されています。たとえば、値が有効な電子メール形式ではない場合、 :invalid 疑似クラスが使用されます。 -class は、有効な電子メール形式、つまり有効な疑似クラスがある場合にトリガーされます。

同様に、codepen では、オンラインで学習するか、コレクションをダウンロードしてください。次に、以下に示すように、コア コードを見ていきます。

input:invalid{ border: 1px solid tomato; }input:valid~ label::after { content: "耶，一个邮箱！"; }input:invalid ~ label::after { content: "枣糕，邮箱邮箱，是邮箱吗？"; }

:read-only および :read-write

次の要素は、:read-only 疑似クラスをアクティブ化できます。

無効な属性を持つフォーム

読み取り専用または無効な属性を持つテキストエリア

contenteditable 属性を指定しないその他の要素

たとえば、次のコードに示されている要素はアクティブ化できます: read-only pseudo -クラスセレクター。

うわー

:read-write 要素は、:read-only 要素の正反対です。

これは比較的単純なので、これ以上ケースは作成しません。ありがとう。

さらに読む

Codrops CSS リファレンス

CSS セレクター レベル 4

JavaScript 用の超高速、クロスブラウザー CSS 3 & 4 セレクター エンジン

ブラウザ CSS-Selector-Test

感謝