VeeValidate3で別フィールドの値をvalidation時に参照する

概要

Vue.jsで入力項目のvalidationを行う際、VeeValidateのライブラリを使うケースが多いと思います。今回はそのVeeValidate3系のバージョンで、パスワードの再入力時の同一チェックのように、別フィールドを参照してvalidationしたい場合の実装方法について書いてみます。

前提など

• 下記の項で紹介する実装サンプルは、Nuxt.js前提とします（Vue.jsで使うのと大差ないとは思いますが念のため・・）。Nuxt.jsでのVeeValidateの使用方法については、【Nuxt.js】vee-validate を使って、フォームのバリデーション実装をするを参照してください。
• 実装サンプルは、よくあるパスワード再入力の例で記載しています。
• 公式ドキュメントについてCross Field Validationを参照しています。ただ、このページはバージョンが変わったら更新されると思うので、あくまで2020年7月時点での内容を参考にしている、という前提でご認識ください。
• VeeValidate2系のバージョンについては、VeeValidateで複数のフィールドにバリデーションをかけるやり方の内容が参考になると思います。

実装サンプル

• pluginに設定しているvee-validate.jsの内容は以下です。今回はパスワードの再入力欄のほうにカスタムのvalidationを設定しています。必要箇所のみ抜粋して記載しています。

vee-validate.js

extend("passwordReInput", {
  params: ["target"],
  validate(value, { target }) {
    return value === target;
  },
  message: "上のパスワード欄と同様のものを入力して下さい"
});

• component側での実装例は以下です。rulesで参照するフィールドのValidationProviderのnameに頭に「@」を付与して、別フィールドを参照しています。なお、以下のサンプルはtemplate部分のみとし、エラーメッセージの表示部分についてのロジックは記載を割愛してます。（errorsを別componentに渡して表示しています）

PasswordSample.vue

<template>
  <div>
    <validation-observer v-slot="{ invalid }">
      <div class="form-group">
        <label for="password">パスワード</label>
        <validation-provider v-slot="{ errors }" rules="required|min:6" name="password">
          <input type="password" class="form-control" v-model="password" />
          <ErrorMessageComponent :errors="errors" />
        </validation-provider>
      </div>
      <div class="form-group">
        <label for="passwordReInput">パスワード再入力</label>
        <validation-provider v-slot="{ errors }" rules="passwordReInput:@password" name="passwordReInput">
          <input type="password" class="form-control" v-model="passwordReInput" />
          <ErrorMessageComponent :errors="errors" />
        </validation-provider>
      </div>
    </validation-observer>
  </div>
</template>

• 表示はこんな風になるイメージです。（エラーメッセージ部分の表示はbootstrapを使用）