Nuxt.js × VeeValidate でカスタムルールを作成する

少々はまったので書いておきます。

前提として、プラグインとして VeeValidate を読み込む場合です。

カスタムルール作成
1. 引数なしの場合
  1. 呼び出し方
2. 引数ありの場合
  1. 呼び出し方

カスタムルール作成

plugins/vee-validate.js

引数なしの場合

import Vue from 'vue'
import VeeValidate, { Validator } from 'vee-validate'
import ja from 'vee-validate/dist/locale/ja'

Vue.use(VeeValidate)
Validator.localize('ja', ja)

/*
** カスタムルール
*/
Validator.extend('hoge', {
  getMessage: (field) => `${field}がエラーです`,
  validate: (value) => value === 'hoge'
})

呼び出し方

.vue ファイル内のテンプレートにて

v-validate="{ hoge: true }"

引数ありの場合

import Vue from 'vue'
import VeeValidate, { Validator } from 'vee-validate'
import ja from 'vee-validate/dist/locale/ja'

Vue.use(VeeValidate)
Validator.localize('ja', ja)

/*
** カスタムルール
*/
Validator.extend('max_array', {
  getMessage: (field, length) => `${field}は${length}個以内にしてください`,
  validate: (value, length) => value.length <= length
})