CSS フォーム検証機能の実装コード

CSS フォーム検証機能の実装コード

レンダリング

原理

フォーム要素には、正規表現(携帯電話番号、メールアドレス、IDカードなど)をカスタマイズできるパターン属性があります。valid疑似クラスは、パターン検証に合格した要素に一致できます。逆に、invalid疑似クラスは、パターン検証に合格しなかった要素に一致できます。したがって、好きなようにできます。上記の効果図は、いくつかの簡単な効果のみを示しています。より多くの効果と制限については、想像力を働かせてください。

html

レイアウトは非常にシンプルです。入力とボタンは兄弟ノードです。必須属性は、入力内容を検証する必要があることを意味します。

<セクションクラス="コンテナ">
  <input type="text" name="tel" placeholder="携帯電話番号を入力してください" pattern="^1[3456789]\d{9}$" 必須><br>
  <input type="text" name="tel" placeholder="確認コードを入力してください" pattern="\d{4}" 必須><br>
  <button type="送信"></button>

CS

ここではscssプリプロセッサが使用されています

入力{
  //検証に合格したときのボタンスタイル&:valid {
    &~ボタン{
      ポインタイベント: すべて;
      カーソル: ポインタ;
      &::後 {
        内容: 「送信: +1:」
      }
    }
  }
  //検証が失敗した場合のボタンスタイル&:invalid {
    &~ボタン{
      ポインターイベント: none; // クリックイベントを削除してボタンをクリックできないようにします&::after {
        内容: 「未確認:面白がらない:」
      }
    }
  }
}

要約する

上記はエディターが導入した CSS フォーム検証機能の実装コードです。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  ウェブページのアクセス速度に関する主な問題と解決策

>>:  ハイパーコネクションの4つの状態の適用の詳細な説明

推薦する

Vueは画像のドラッグアンドドロップ機能を実装します

この記事の例では、画像のドラッグアンドドロップ機能を実現するためのVueの具体的なコードを参考までに...

Angularコンポーネント投影の詳細な説明

目次概要1. 簡単な例1.サブコンポーネントの<ng-content>ディレクティブを使...

MySQL 5.7.21 解凍バージョンのインストールと設定のグラフィックチュートリアル

この記事では、MySQL 5.7.21の解凍版をダウンロードしてインストールする詳細な手順を記録して...

Linux CentOS MySQL データベースのインストールと設定のチュートリアル

MySQLデータベースのインストールに関するメモ、みんなで共有a) MySQL ソースインストールパ...

Vue3.0のさまざまなリスニング方法の包括的な概要

目次リスナー1.ウォッチエフェクト2.見る1.1 聴くための最初の方法1.2 聞く2つ目の方法1.3...

非常に便利な CSS 開発ツール 8 つを紹介

CSS3 パターン ギャラリーこの CSS3 パターン ライブラリには、純粋な CSS3 を使用して...

Linux 仮想メモリ設定のチュートリアルと実践

仮想メモリとは何ですか?まずはWikipediaからの紹介文をそのまま引用します。仮想メモリは、コン...

Mac での MySql の詳細なインストールと構成

1.ダウンロードしてインストールする公式ウェブサイトからコミュニティ エディションの dmg インス...

Linux は suid vim.basic ファイルを使用して権限昇格を実現します。

カリで再現まず、必要なvim.basicファイルにsuid権限を設定します。 chmod u+s /...

HTMLからPDFへのスクリーンショット保存機能の実装

テクノロジーの活用itext.jar: バイト ファイル入力ストリームを画像、PDF などに変換しま...

Dockerでパラメータ変数を外部から指定する方法

この記事は主にDockerでパラメータ変数を外部から指定する方法を紹介します。この記事のサンプルコー...

CentOS システムの rpm インストールと Nginx の設定

目次CentOS rpm のインストールと Nginx の設定導入rpm パッケージのインストールサ...

Linux での MongoDB のインストールと設定のチュートリアル

MongoDBインストールYumを使用してインストールすることを選択する1. repoファイルを作成...

DQL コマンドを使用して MySQL でデータをクエリする方法

この記事では、MySQL でよく使用されるデータ クエリ言語について説明します。 DQL (データク...

IIS サーバーから apk ファイルをダウンロードする際の 404 エラーの解決策

最近、IIS をサーバーとして使用すると、apk ファイルがサーバーにアップロードされましたが、ダウ...