Vee Validateのカスタムルールを作成する方法

概要

Vee Validateを用いて
バリデーションの設定を行う機会があった。
defaultで用意されたValidation Rulesではなく、
独自のルールを設定したい場合の方法についてメモとして書き残しておく。

詳細

/plugins/vee-validate.jsでカスタムルールを設定する

vee-validate.js

import Vue from 'vue';

// 使用する機能
import {
    ValidationProvider,
    localize,
    extend
} from 'vee-validate';

Vue.component('ValidationProvider', ValidationProvider);

// エラーメッセージの日本語化
import ja from 'vee-validate/dist/locale/ja.json';
localize('ja', ja);

// 使用するvalidation rules
import { numeric } from 'vee-validate/dist/rules';
extend('numeric', numeric);

// カスタムルールの設定
// validation-providerタグのrulesで指定する値を指定
extend('number', {
    // エラーメッセージを設定する
    message: '数値の先頭に0は不要です',
    validate(value) {
        if (value.match(/^([1-9]\d*|0)$/)) {
            return true;
        }
    }
});

// validation-providerタグのrulesで指定する値を指定
extend('larger', {
    params: [
        {
            name: 'minimum',
            isTarget: true
        }
    ],
    // エラーメッセージの{_field_},{minimum}にはvalidation-providerタグのnameで指定した文字列が入る
    message: '{_field_}は{minimum}より大きい数値を入力してください',
    validate(value, { minimum }) {
        return value > minimum;
    }
});

/plugins/vee-validate.jsで設定したカスタムルールをvueファイルに適用する

input.vue

<template>
    <div>
        <label>最小文字数</label>
        <validation-provider
            v-slot="{ errors }"
            rules="numeric|number"
            vid="minimum"
            name="最小文字数"
        >
            <input type="text”>
            <p v-show="errors.length”>{{ errors[0] }}</p>
        </validation-provider>
    </div>
    <div>
        <label>最大文字数</label>
        <validation-provider
            v-slot="{ errors }"
            rules="numeric|number|larger:minimum"
            name="最大文字数"
        >
            <input type="text”>
            <p v-show="errors.length”>{{ errors[0] }}</p>
        </validation-provider>
    </div>
<template>

<!-- 省略 -->

参照

• VeeValidate - Custom Rules
• VeeValidateのクロスフィールドのカスタムルール設定方法