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) の構成

推薦する

Vueはvueメタ情報を使用して各ページのタイトルとメタ情報を設定します。

title: vue は vue-meta-info を使用して各ページのタイトルとメタ情報を設定...

Dockerプライベートウェアハウスレジストリの導入

使用される Docker イメージが増えるにつれて、イメージを保存する場所、つまりウェアハウスが必要...

a タグにはテキストと画像があります。テキストを非表示にして画像のみを表示するにはどうすればよいでしょうか?

多くの場合、画像を表示する<a>タグのスタイルに遭遇しますが、タグ内にテキストがあり、そ...

SQL 集計、グループ化、並べ替え

目次1. 集計クエリ1. COUNT関数2. SUM関数3. AVG関数4. MAX関数とMIN関数...

HTML 基本コントロール入門_PowerNode Java アカデミー

<input> タグ<input> タグはユーザー情報を収集するために使用さ...

MySQLクエリのパフォーマンスに影響を与える大きなオフセットの理由と最適化の詳細な説明

序文MySQL クエリは select コマンドを使用し、limit および offset パラメー...

Dockerを使用してSpring Bootプロジェクトをデプロイする手順

目次シンプルなSpringbootプロジェクトを作成する1. pom.xmlでSpring Boot...

Typescriptを使用してWeChatミニプログラムでプロジェクトを作成する方法

プロジェクトを作成するWeChat開発者ツールでプロジェクトを作成し、言語でTypeScriptを選...

CSS3+JavaScript を使用したクールな呼吸効果のサンプル コード

CSS3 アニメーションで実現したシンプルでクールな効果。最終的な効果は次のようになります。 ページ...

CSS3 変換によって子要素の固定位置を絶対位置に変更する方法

この記事では、CSS3 の transform を使用して子要素の固定配置を絶対配置に変更する方法を...

LinuxにNginxをインストールする正しい手順

序文私のように、Java バックエンドに勤勉な人であれば、多数のプロジェクト機能を実装することに加え...

MySQL 結合テーブルと ID 自動増分の例の分析

結合の書き方左結合を使用する場合、左側のテーブルが必ず駆動テーブルになりますか? 2 つのテーブルの...

Linuxはsttyを使用して端末の回線設定を表示および変更します。

Sttty は、Linux で端末設定を変更および印刷するための一般的なコマンドです。 1. パラ...

Nginxドメイン名転送の実装

Nginx の紹介Nginx (「エンジン x」) は、ロシアのプログラマー Igor Sysoev...

Mysql テーブルコメントフィールド取得操作

余計なことは言わないで、コードだけ見てみましょう〜 -- テーブル内のフィールドコメントを表示および...