【vee-validate】エラーチェック条件を外部ファイルに追加する方法【Vue.js】

vee-validateでエラーチェックを外部ファイルに追加する方法を紹介します。

公式ドキュメントを見てもチェックするファイル内での記述しか載っていません。
Vue詳しい人であればすぐに思いつくのでしょうがVue初心者で苦労したので覚書を残しておきます。

まずは完成形は下記になります。

Form.vueファイルになります。
このファイルはコンポーネントとしてvue-routerで呼び出しています。

<template>
  <div class="regForm">

    <ValidationObserver v-slot="{ handleSubmit }" ref="form">
      <form @submit.prevent="handleSubmit(onSubmit)">
        <ValidationProvider rules="required|email" name="メールアドレス" v-slot="{ errors }">
        メールアドレス：<input type="email" name="mail" v-model="mail"><br>
        <transition name="fade"><p v-show="errors[0]">{{errors[0]}}</p></transition>
        </ValidationProvider>

        <ValidationProvider :rules="{required: true,email: true,email_conf:mail}" name="メールアドレス確認用" v-slot="{ errors }">
        メールアドレス確認：<input type="email" name="mail_conf" v-model="mail_conf"><br>
        <transition name="fade"><p v-show="errors[0]">{{errors[0]}}</p></transition>
        </ValidationProvider>
        <button type="submit">確認</button>
      </form>
    </ValidationObserver>
  </div>
</template>

<script>
import { ValidationProvider, ValidationObserver, extend, localize } from 'vee-validate' // veeValidateの読み込み
import ja from 'vee-validate/dist/locale/ja.json' // 日本語設定ファイル読み込み
localize('ja',ja) // デフォルトエラーの文言を日本語に設定

// デフォルトルールを全て読み込み
import * as DefaultRules from 'vee-validate/dist/rules'
for (const rule in DefaultRules) {
  extend(rule, DefaultRules[rule])
}

// 自分で実装したルールを1つずつ読み込む場合はこちらを使ってください。
// import { password } from '@/mixins/validation-custom-rules'
// extend('password',password)

// 自分で実装したルールを全て読み込み
import * as ValidationCustomRules from '@/mixins/validation-custom-rules'
for (const rule in ValidationCustomRules) {
  extend(rule, ValidationCustomRules[rule])
}

export default {
  components:{
    ValidationProvider,  // 入力時にリアルタイムでエラーチェック
    ValidationObserver   // 送信時にエラーチェック
  },
  data:function(){
    return {
      mail:         '', // メールアドレスを保持するための変数
      mail_conf:    ''  // メールアドレス確認用を保持するための変数を定義
    }
  },
  methods: {
    onSubmit () {
      // vue-routerで次の画面へ遷移させる
      this.$router.push('/registry/conf')
    }
  }
}
</script>

下記がエラーチェック条件ファイル（validation-custom-rules.js）になります。

// 確認メールアドレスチェック
const email_conf = {
  // ルールを書くときに使う引数。
  params: ['email'],

  // バリデーションロジック
  validate(value, { email }) {
    return ( value && value != email ) ? false : true // or false true: バリデーションエラーなし, false: バリデーションエラーあり
  },

  // バリデーションエラーメッセージ
  message(field){
    return `※${field}が一致していません。`
  },
}

// パスワードの入力値チェック（ 0-9 a-z A-Z ! " # $ % & ' ( ) * , . / : ; < = > ? @ [ ] ^ _ ` { | } ~ ）
const password = {
  // ルールを書くときに使う引数。
  params: [],

  // バリデーションロジック
  validate(value) {
    var re = /^[0-9a-zA-Z\-!"#$%&'()*,./:;<=>?@[\]^_`{|}~]*$/
    return re.test(String(value)) // true: バリデーションエラーなし, false: バリデーションエラーあり
  },

  // バリデーションエラーメッセージ
  message(){
    return `※使用できない文字が使われています。`
  },
}

// 定義
export {
  email_conf,
  password,
  agree_chk
}