Vueでフォーム検証を実装する方法

Vueでフォーム検証を実装する方法

1. インストールと使用

まず、Vue プロジェクトにインストールします。

npm インストール --save vue-input-check


インストールが完了したら、以下をインポートして登録します。

'vue-input-check' から inputCheck をインポートします。

// Vue.use(inputCheck) をインストールします。

次に、次の形式で使用できます。

<フォームの自動補完="オフ" 検証なし>
    <input v-model='key' name='入力ボックス名' v-input-check='[key,"validate-express"]'/>
    <!-- 入力ボックスは必要な数だけ作成できます -->
</フォーム>


ご覧のとおり、上記のv-input-check各入力ボックスのルールを定義する場所です。値は配列です。最初の値は入力ボックスのv-modelで、2 番目の値は文字列です。構文は次のとおりです。

検証エクスプレス="val1:param1:param2|val2|valu3:param1"


異なるルールは | で区切られ、パラメータを渡す必要があるルールのパラメータは : で区切られます。いくつかの例を見てみましょう。

    v-input-check='[キー、"必須|最大長:10|正規表現:^\\d{1,5}$"]'
    v-input-check='[キー、"必須"]'


現在、次の組み込みルールが利用可能です。

required:boolean:値を入力する必要があることを示します。値を入力する必要があるかどうかを示すオプションのパラメータがあります。デフォルト値はtrue
maxLength:num:最大長
minLength:num:最小の長さ
regexp:str:正規表現

2. 検証結果の取得

ページ ルールを定義した後、検証結果を取得する方法は 2 つあります。

1.JS方式

チェックを開始するには、次の方法を使用します。

this.$validateCheck(formnode、コールバック、エラーバック);


このオブジェクトには 3 つのパラメータが含まれています。

  • formnode : 検証が必要なフォームノード。必須
  • callback : フォームの有効性コールバック、オプション
  • errorback : フォーム不正コールバック、オプション

さらに、エラー コールバックには、次のデータ形式のパラメーターがあります。

{
    "$el": 間違った入力ボックス ノード "$error": 現在の入力ボックスの最初のエラー メッセージ}

2. HTML方式

このメソッドを提供する目的は、ページ上の現在のフォームの入力状態に関するリアルタイムのフィードバックを提供することです。

まず、フォーム上で、 classv-validまたはv-invalidが含まれているかどうかを判断することで、フォームが有効かどうかを判断できます。

同様に、 v-input-checkディレクティブが追加されている場所でも、その場所が正当かどうかを判断することができます。 不正な必須入力など、より具体的なエラーの詳細については、クラスはv-invalid-required v-invalidのようになります。

3. カスタム検証ルール

ほとんどの場合、デフォルトのルールだけではすべてのビジネス状況に対応できないことが多いため、新しい検証ルールを追加する必要もあります。

Vue.use(inputCheck, {

    // カスタム検証ルール検証: [{

        //ルール名: "XXX",

        // 検証メソッド。合法の場合は true を返し、違法の場合は false を返します。 // el と val を除き、この関数の残りのパラメータは使用時に ```:``` によって渡され、任意の数を指定できます。 // たとえば、 ``` required:true|phone:parm1:param2 ```
        テスト: 関数 (el, val, ...) {
            true|false を返します。
        },

        // プロンプト情報が不正です。文字列メッセージを返す必要があります: function (el, name) {
            「XXX」を返します。
        }
    },
    // 検証ルールは複数存在する可能性があります...
    ]

});

これで、Vue でフォーム検証を実装する方法に関するこの記事は終了です。Vue でフォーム検証を実装する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue ElementUI フォームのフォーム検証
  • Vue Element-ui フォーム検証ルールの実装
  • Vue element-ui親コンポーネントは子コンポーネントのフォーム検証操作を制御します。
  • Vue+elementでフォーム検証機能を実現
  • Vue.js + Nuxt.js プロジェクトで Vee-validate フォーム検証を使用する
  • Vue でフォーム検証を実装するためのカスタム命令の使用方法
  • Vue2.0 フォーム検証コンポーネント vee-validate の使用に関する詳細な説明
  • Vue.js フォーム検証プラグイン

<<:  MySQL の CPU 負荷が高い問題のトラブルシューティング

>>:  Win10にnginxをインストールして設定するプロセス

推薦する

Vueタイマーの実装方法

この記事では、参考までにタイマーを実装するためのVueの具体的なコードを紹介します。具体的な内容は次...

Linux システムが VMware にインストールされているかどうかを確認する方法

現在の Linux システムが VMware にインストールされているかどうかを確認する方法を教えて...

Nodejs での WeChat アプレット メッセージ プッシュの実装

サブスクリプションメッセージテンプレートを選択または作成するWeChat アプレットにログインし、「...

発生したブラウザの互換性の問題と解決策(推奨)について

序文:先週の日曜日、先輩から3ページ作るのを手伝って欲しいと頼まれました。データのやり取りなどはなく...

MySQLでNULL値を判定する際の落とし穴事例

目次序文Mysql の case when 構文:事例実践:要約:序文今日、プログラムを開発している...

Linux で cmake を使用して MySQL をコンパイルおよびインストールするための詳細なチュートリアル

1. cmakeをインストールする1. cmakeの圧縮パッケージを解凍する [root@mysql...

Linuxのdateコマンドの使用

1. コマンドの紹介date コマンドは、現在の時刻または指定された時刻を指定された形式で表示するた...

CSSを使用してダークモードとブライトモードを切り替える

Web Skills第5号では、CSSでダークモードやハイライトモードを実装するための技術的なソリュ...

特殊効果メッセージボックスを実現するネイティブJS

この記事では、ネイティブ JS で実装された特殊効果メッセージ ボックスを紹介します。効果は次のとお...

Alibaba Cloud Serverにプログラムをデプロイし、ドメイン名を使用して直接アクセスする方法の詳細な説明

何もすることがなかったので、学習用に最も安いAlibaba Cloudサーバーを購入しました。年間3...

格納可能なセカンダリメニューを実装するための JavaScript

JavaScriptで格納可能なセカンダリメニューを実装するための具体的なコードは参考までに。具体...

iframe でページを開く方法

解決:リンクのターゲット属性値をターゲット フレームワーク名と同じに設定するだけです。具体的な手順:...

純粋な JS を使用して vue.js で双方向バインディング機能を実装する方法

目次まず、双方向バインディングを実装するアイデアについて説明します。これらの機能を実装するための j...

MySQL マルチテーブル結合クエリ例の説明

実際のプロジェクトでは、複数のテーブル間に関係が存在します。 1 つのテーブル内のすべてのデータを取...

Alibaba Cloud ECS centos6.8 に MySql5.7 をインストールして設定するチュートリアル

Alibaba Cloud yum コマンドでのデフォルトの MySQL バージョンは 5.17**...