純粋な CSS でフォ​​ーム検証を実装するためのサンプル コード

純粋な CSS でフォ​​ーム検証を実装するためのサンプル コード

日常業務において、フォームの検証は非常に一般的な設計要件です。ログイン ボックスや登録ボックス、アンケートでもフォームの検証が必要です。

一般的に、私たちの実装の考え方は、JS が入力ボックスの入力内容を監視し、ユーザーの入力内容を判別して、次の操作を決定するというものです。

たとえば: (次の例は、優れたオープンソース UI ライブラリである element からのものです)

<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <el-フォーム項目
    label="年齢"
    プロパティ="年齢"
    :ルール="[
      {必須: true、メッセージ: '年齢は空欄にできません'},
      { タイプ: 'number'、メッセージ: '年齢は数値でなければなりません'}
    ]"
  >
    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('numberValidateForm')">送信</el-button>
    <el-button @click="resetForm('numberValidateForm')">リセット</el-button>
  </el-form-item>
</el-form>
<スクリプト>
  エクスポートデフォルト{
    データ() {
      戻る {
        数値検証フォーム: {
          年: ''
        }
      };
    },
    メソッド: {
      送信フォーム(フォーム名) {
        this.$refs[formName].validate((valid) => {
          (有効)の場合{
            alert('送信!');
          } それ以外 {
            console.log('送信エラー!!');
            false を返します。
          }
        });
      },
      resetForm(フォーム名) {
        this.$refs[フォーム名].resetFields();
      }
    }
  }
</スクリプト>

上記は正規表現検証ですが、基本的には JS で完了しています。では、これを CSS で実装することはできるでしょうか?答えはイエスです。こちらがデモです

CSS によるフォーム検証の実装

上記のフォーム検証は CSS によって完全に実装されており、コア属性はCSS Level 4 Validityです。 :valid:invalidのプロパティを使用して<input>valueを判断するという考え方です。

完全なコードはこちら

/*
 * css
 */
 :根 {
 	--エラー色: 赤;
 }
 .form > 入力 {
 	下マージン: 10px;
 }
 .form > .f-tips {
 	色: var(--error-color);
 	表示: なし;
 }
 input[type="text"]:無効 ~ input[type="submit"],
 入力[type="password"]:無効 ~ 入力[type="submit"] {
 	表示: なし;
 }
 入力[必須]:無効 + span {
 	表示: インライン;
 }
 
 /*
  *html
  */
<form class="form" id="form" method="get" action="/api/form">
    アカウント:
    <input data-title="アカウント" pattern="[\w]{6,10}" name="アカウント" type="text" 必須 />
    <span class="f-tips">正しい口座番号を入力してください</span>
    <br />
    パスワード:
    <input data-title="パスワード" pattern="[\w]{6,10}" name="パスワード" type="パスワード" 必須 />
    <span class="f-tips">正しいパスワードを入力してください</span>
    <br />
    <input name="button" type="submit" value="送信" />
</フォーム>

エフェクトのスクリーンショット

使用される知識ポイント

1. HTML5<input>の新しい属性: pattern

MDN の説明:

コントロールの値をチェックするための正規表現。パターンは、値の一部ではなく、値全体に一致する必要があります。ユーザーの役に立つように、title 属性を使用してモードを説明します。この属性は、type 属性の値が text、search、tel、url、または email の場合に適用されます。それ以外の場合は無視されます。 (IE10以降に対応)

述べる:

pattern内の検証ルールが不正な場合、たとえば長さチェックでスペースが多すぎる場合、コンソールにエラーが報告されます。詳細は次のとおりです。

<input data-title="アカウント" pattern="/[\w]{6, 10}/" name="アカウント" type="text" 必須 />

CSSJSの検証ルールは異なります。以下の記述は無効になります。コア検証ルールは[]で囲む必要があります。(現在、テストしたいくつかの例でこのようになっています。具体的な詳細はデータで確認する必要があります。より具体的な情報をご存知の方がいらっしゃいましたら、ぜひ教えてください。ありがとうございます!)

<input data-title="アカウント" pattern="/\w{6,10}/" name="アカウント" type="text" 必須 />

2. CSS Level 4 選擇器の新しいプロパティ: invalid

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  デザイナーはコーディングを学ぶ必要がありますか?

>>:  フロントエンド JavaScript ハウスキーパー package.json

推薦する

良い広告にはどのような特徴が必要ですか?

広告業は人間であることに似ていると言う人がいます。これは本当です。優れた広告には、優れた人間と同じよ...

emとは?emとpxの紹介と変換方法

それは何ですか? em はフォントの高さを指し、どのブラウザでもデフォルトのフォントの高さは 16 ...

Ubuntu LinuxにOracle Java 14をインストールする方法

最近、Oracle は Java 14 (または Oracle JDK 14) の一般公開を発表しま...

Vue で手ぶれ補正とスロットリングを使用する方法

目次序文コンセプト安定意味使用シナリオコードVueでの使用スロットリング意味使用シナリオコードVue...

CSS トランジションを使用した円形ホバー効果のサンプルコード

この記事では ソースコードのオンラインプレビューとダウンロード今日のチュートリアルでは、円のホバー効...

選択タグ内のオプションをクリアする3つの方法

方法1コードをコピーコードは次のとおりです。 document.getElementById(&qu...

CSS を使用して正方形の div を実装する 2 つの方法

目標: 辺の長さが等しい正方形を作成する方法 1: 単位 vw を使用する (ps これが最も簡単な...

バックエンドデータを取得するためのVue Elementフロントエンドアプリケーション開発

目次概要1. バックエンドデータの取得と処理2. インターフェース表示処理概要前回のエッセイ「ステッ...

問題におけるJS演算子の調査

問題は、誰もが「メモリ リーク」について知っていることです。一般的なシナリオはいくつかあります。クロ...

HTML 特殊文字変換表

キャラクター小数点文字番号エンティティ名---未使用空間---スペースバー! ! ---感嘆符「 」...

MySQL 8.0 のインデックス スキップ スキャン

序文MySQL 8.0.13 では、インデックス スキップ スキャン (インデックス ジャンプ スキ...

Vue の詳細な入門ノート

目次1. はじめに2. 初期ビュー(I) Vueの概念を理解する(II) MVVMアーキテクチャ(I...

CentOS で MySQL 5.1 を 5.5.36 にアップグレードする

CentOS 6.4 環境で MySQL 5.1 を 5.5.36 にアップグレードする手順を記録し...

Vueはmockjsを使用してシミュレートされたデータケースの詳細を生成します

目次プロジェクトにmockjsをインストールするVueプロジェクトでmockjsを使用する基本的なプ...

17 個の JavaScript ワンライナー

目次1. DOMとBOM関連1. 要素にフォーカスがあるかどうかを確認する2. 要素の兄弟ノードをす...