日常業務において、フォームの検証は非常に一般的な設計要件です。ログイン ボックスや登録ボックス、アンケートでもフォームの検証が必要です。 一般的に、私たちの実装の考え方は、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 */ :根 { --エラー色: 赤; } .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. MDN の説明: コントロールの値をチェックするための正規表現。パターンは、値の一部ではなく、値全体に一致する必要があります。ユーザーの役に立つように、title 属性を使用してモードを説明します。この属性は、type 属性の値が text、search、tel、url、または email の場合に適用されます。それ以外の場合は無視されます。 (IE10以降に対応) 述べる: <input data-title="アカウント" pattern="/[\w]{6, 10}/" name="アカウント" type="text" 必須 /> <input data-title="アカウント" pattern="/\w{6,10}/" name="アカウント" type="text" 必須 /> 2. 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
>>: フロントエンド JavaScript ハウスキーパー package.json
広告業は人間であることに似ていると言う人がいます。これは本当です。優れた広告には、優れた人間と同じよ...
それは何ですか? em はフォントの高さを指し、どのブラウザでもデフォルトのフォントの高さは 16 ...
最近、Oracle は Java 14 (または Oracle JDK 14) の一般公開を発表しま...
目次序文コンセプト安定意味使用シナリオコードVueでの使用スロットリング意味使用シナリオコードVue...
この記事では ソースコードのオンラインプレビューとダウンロード今日のチュートリアルでは、円のホバー効...
方法1コードをコピーコードは次のとおりです。 document.getElementById(&qu...
目標: 辺の長さが等しい正方形を作成する方法 1: 単位 vw を使用する (ps これが最も簡単な...
目次概要1. バックエンドデータの取得と処理2. インターフェース表示処理概要前回のエッセイ「ステッ...
問題は、誰もが「メモリ リーク」について知っていることです。一般的なシナリオはいくつかあります。クロ...
キャラクター小数点文字番号エンティティ名---未使用空間---スペースバー! ! ---感嘆符「 」...
序文MySQL 8.0.13 では、インデックス スキップ スキャン (インデックス ジャンプ スキ...
目次1. はじめに2. 初期ビュー(I) Vueの概念を理解する(II) MVVMアーキテクチャ(I...
CentOS 6.4 環境で MySQL 5.1 を 5.5.36 にアップグレードする手順を記録し...
目次プロジェクトにmockjsをインストールするVueプロジェクトでmockjsを使用する基本的なプ...
目次1. DOMとBOM関連1. 要素にフォーカスがあるかどうかを確認する2. 要素の兄弟ノードをす...