vee-validate で「特定のフィールドに固有のバリデーションメッセージを設定する

はじめに

「特定のフィールドの regex バリデーションメッセージを変更したい」という要件が上がってきたんだけど、vee-validateではどう実現するのが正解がわからなかった。

やりたいこと

• regex のグローバルで設定しているバリデーションメッセージは変更したくない。
• 特定のフィールドの regex のバリデーションメッセージだけを変更したい。
• 他の検証ルールのメッセージはそのまま。

やったこと

lib/validatormessage.ts

import { Validator } from 'vee-validate';

export function getError(
    validator: Validator,
    field: string,
    ruleMsssageMap: { [rule: string]: string }
): string | null {
    const errors = validator.errors.items.filter((e) => e.field === field);
    if (errors.length > 0) {
        const error = errors[0];
        let isExists = false;
        for (const rule in ruleMsssageMap) {
            if (error.rule === rule) {
                isExists = true;
            }
        }

        if (isExists) {
            return ruleMsssageMap[error.rule];
        } else {
            return validator.errors.first(field);
        }
    }

    return null;
}

xxx.vue

<template>
  <input
    type="text"
    name="myfield"
    v-model="myfieldValue"
    v-validate="{ required: true, regex: /[1-9]/ }"
  />
  <div v-show="myfieldError">
    {{ myfieldError  }}
  </div>
</template>
<script lang="ts">
import { getError } from '@lib/validatormessage'
...
computed: {
    myfieldError: {
      get: (): string | null => {
        return getError(this.$validator, 'myfield' { regex: 'custom error message.' })
      },
    },
  },
<script>

まとめ

特定のフィールドで、他の検証ルールに影響をあたえず、特定の検証ルールにのみバリデーションメッセージを設定することに成功しました。
みんなはどのように実装しているんだろう…(゜_゜)