Vue vee-validateプラグインの簡単な使い方

Vue vee-validateプラグインの簡単な使い方

1. インストール

2. インポート

'vee-validate' から { フォーム、フィールド } をインポートします。

3. 検証ルールを定義します(エクスポート用に js ファイルを utils フォルダに別途パッケージ化するのが最善です)

// エクスポート用のjsファイルを作成する export default {
  // アイテムアカウントを確認する
  アカウント(値) {
    if (!value) return 'cannot be empty' // 条件判断、
    true を返す // 最後に、渡されたすべてのものは true を返す必要があります
  },
  パスワード (値) {
    if (!value) return 'パスワードを入力してください'
    if (!/^\w{6,24}$/.test(value)) return 'パスワードは6〜24文字です'
    真を返す
  },
  モバイル(値){
    if (!value) return '電話番号を入力してください'
    if (!/^1[3-9]\d{9}$/.test(value)) return '電話番号の形式が正しくありません'
    真を返す
  },
  コード (値) {
    if (!value) return '認証コードを入力してください'
    if (!/^\d{6}$/.test(value)) return '認証コードは6桁です'
    真を返す
  },
  isAgree (値) {
    if (!value) return 'ユーザー契約に同意するにはチェックを入れてください'
    真を返す
  }
}

4. フォームコンポーネントを使用して検証ルールとエラーオブジェクトを設定します(フォームとフィールドは両方ともプラグインからオンデマンドでエクスポートされます)

// validation-schema="mySchema" は検証ルールを設定します // v-slot: エラーオブジェクトをエクスポートします <Form
  :validation-schema="mySchema"
  v-slot="{エラー}"
>
 <!-- フォーム要素 -->
</フォーム>

<スクリプト>
  '@/utils/vee-validate-schema' からスキーマをインポートします
  設定 () {
    // フォームオブジェクトデータ const form = reactive({
      account: null, // アカウント password: null // パスワード })
    // 検証ルールオブジェクト const mySchema = {
      アカウント: schema.account、
      パスワード: schema.password
    }
    { フォーム、mySchema } を返します
 } 
</スクリプト>

5. フィールドコンポーネントを使用してフォーム項目の検証を追加する

//1. 入力を `Field` コンポーネントに変更します。これはデフォルトで入力として解析されます。
//2. `Field` は、スキーマ内のどの検証ルールを使用するかを指定するための name 属性を追加します //3. `Field` は、フォームデータの双方向バインディングを提供するために v-model を追加します //4. フォーム検証エラーが発生すると、エラークラス名 `error` が表示され、赤い枠線の <Field が表示されます
      v-model="フォーム.アカウント"
      名前="アカウント" 
      タイプ="テキスト"
      placeholder="ユーザー名を入力してください"
      :class="{ error: errors.account }" // エラーメッセージが返された場合、クラスエラーを表示するかどうかはtrueです
    />
    <!-- <input type="text" placeholder="ユーザー名を入力してください" /> -->

6. フォームデータと検証ルールデータを補足する

// フォームにバインドされたデータ const form = reactive({
  account: null, // アカウント password: null, // パスワード isAgree: true // 選択されているかどうか})

// 現在のフォームに必要な検証データルールを宣言します const curSchema = reactive({
  アカウント: schema.account, // アカウント パスワード: schema.password, // パスワード isAgree: schema.isAgree // 選択されているかどうか})

上記は、Vue vee-validateプラグインの簡単な使用方法の詳細内容です。Vue vee-validateプラグインの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • vue.js フォーム検証プラグイン (vee-validate) の使用に関する詳細なチュートリアル
  • Vue.js + Nuxt.js プロジェクトで Vee-validate フォーム検証を使用する
  • vee-validate vue 2.0 カスタムフォーム検証の例
  • Vue で vee-validate フォーム検証を使用する方法
  • Vue2.0 フォーム検証コンポーネント vee-validate の使用に関する詳細な説明

<<:  MySQLのSQL文はインデックスを使用しません

>>:  web.config (IIS) および .htaccess (Apache) の構成

推薦する

divの適応高さは残りの高さを自動的に埋めます

シナリオ 1: HTML: <div class="outer"> ...

Linux の一般的なコマンドとショートカット キーの紹介

目次1 システムの紹介2 システムショートカット3 一般的なシステムコマンド1 システムの紹介 1....

Node.js パッケージ マネージャー npm の具体的な使用方法

目次目的npm init および package.json ファイルモジュールのインストールと管理モ...

Linux 上の MYSQL 5.7 でルート パスワードを取得する際の問題 (テスト済み、利用可能)

目次1. --skip-grant-tables 経由で取得する1.1 my.conf を変更し、新...

Linuxファイルの基本属性の知識ポイントのまとめ

Linux システムは典型的なマルチユーザー システムです。異なるユーザーは異なる立場にあり、異なる...

vue-seamless-scrollがスクロールしていいねをするときのデータ同期の問題を解決する

VUE は vue-seamless-scroll を使用して、自動的にスクロールしていいねします。...

Vue Element-ui フォーム検証ルールの実装

目次1. はじめに2. ルール検証の入力モード2.1 サンプルコード2.2、フォーム項目2.3. 小...

MySQL 5.7.21 winx64 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.21のインストールに関する注意事項をまとめ、皆さんと共有します。 ...

SQL で行の最大値または最小値を取得する方法

元データと対象データSQL文を実装する(最大) 選択 店、 月、 最大(dz,fz,sp) が最大値...

フォームを送信した後、別のファイルに移動する

<br />質問:特定のファイルにジャンプするには、HTML でどのように記述すればよい...

CSS3 で背景の透明化と不透明テキストを実装するサンプルコード

最近、画像上に半透明の背景でテキストを表示する必要があるという要件に遭遇しました。その効果は次のよう...

Linux で特定のユーザーにフォルダーのすべてのコンテンツを許可するにはどうすればよいですか?

【問題分析】 chown コマンドを使用できます。ここで ch は change (変更) を表し...

Linux でプロセスを隠す方法と、遭遇する落とし穴

序文1. この記事で使用したツールは、https://github.com/gianlucabore...

Linux プロセス管理ツール スーパーバイザーのインストールと設定のチュートリアル

環境: CentOS 7公式ドキュメント: http://supervisord.org/インストー...

Vue グローバル フィルターの概念、注意事項、基本的な使用方法

目次1. フィルターの概念1. グローバルフィルターのフォーマットをカスタマイズする2. フィルター...