Vue.js学習メモ(バリデーション)

VeeValidateを使って、タスク追加・編集フォームのバリデーションチェックを行っていきます。 フォームに入力されたデータに対して、リアルタイムでエラーを表示させることができるようになります。

①インストール

yarn add vee-validate
// もしくは
npm install vee-validate

②バリデーションルールを設定したいフォルダのscriptに書く。 　長くなったり、複数のフォルダで設定したい場合は、専用のフォルダに書く。

import Vue from 'vue'

//  vee-validateのライブラリを呼び出し
import {
  ValidationProvider,
  ValidationObserver,
  extend
} from 'vee-validate'

//  バリデーションルール
import {
  email,
  required
} from 'vee-validate/dist/rules';

// Vue.componentに上記で取得したValidationProviderとValidationObserverを読み込ませる
Vue.component('ValidationObserver', ValidationObserver) 
//  各フィールドを監視するために使用
Vue.component('ValidationProvider', ValidationProvider) 
//  フォーム全体を監視するために使用

// 以下、extendでルールやメッセージの定義(emailなどはあらかじめ組み込まれている)
extend('email', {
  ...email,
  message: '{_field_}の形式で入力してください'
});

extend('required', {
  ...required,
  message: '{_field_}は必須項目です'
});

extend('min', {
  validate(value, { length }) {
    return value.length >= length;
  },
  params: ['length'],
  message: '{_field_}は{length}文字以上で入力してください'
});

③定義したルールをフォームで使う(例としてログインフォーム)。

<template>
  <div id="login-form">
    <ValidationObserver v-slot="{  handleSubmit  }">  
       //  ValidationObserverで全体を監視
      <div class="form-group text-left">
        <ValidationProvider  
          //  ValidationProviderで個別のフォームを監視
          v-slot="{ errors }"  
          // ValidationProvider内のエラーが全てそのまま配列に入ってる
          rules="required|email"  
          //  ここでは、必須とemailの形式になっているかのバリデーションルール
        >
          <label for="email">メールアドレス</label>
          <input
            id="email"
            v-model="user.email"
            name="メールアドレス"
            type="email"
            class="form-control"
            placeholder="test@example.com"
          >
          <span class="text-danger">{{ errors[0] }}</span>  
         //  ここでエラーの表示
        </ValidationProvider>
      </div>
      <div class="form-group text-left">
        <ValidationProvider
          v-slot="{ errors }"
          rules="required|min:3"  
          //  ここでは、必須チェック及び最低文字数が3文字以上か
        >
          <label for="password">パスワード</label>
          <input
            id="password"
            v-model="user.password"
            name="パスワード"
            type="password"
            class="form-control"
            placeholder="password"
          >
          <span class="text-danger">{{ errors[0] }}</span>
        </ValidationProvider>
      </div>
      <button
        type="submit"
        @click="handleSubmit(login)"
      >
        ログイン
      </button>
    </ValidationObserver>
  </div>
</template>

一回、最近書いた記事を見直した方がいいかなと思います(主に見やすさや出典の表記)。 そろそろ、vueを使ってアプリを作ろうかと思います。