VeeValidateのクロスフィールドのカスタムルール設定方法（v3系）

サンプルとして confirmdのようなルールを自作してみます。

前回の基本サンプルと大きく違うのは、比較する対象を指定する必要があることです。
そのために、 params プロパティにオブジェクトで isTarget: true と name プロパティを設定します。

作成したカスタムルールを field に設定する方法は、普段どおり <validation-provider> の rules プロパティに confirmd のように設定します。

コード

const VeeValidate = window.VeeValidate;
const VeeValidateRules = window.VeeValidateRules;
const ValidationProvider = VeeValidate.ValidationProvider;
const ValidationObserver = VeeValidate.ValidationObserver;
Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);

//required rule
VeeValidate.extend('required', VeeValidateRules['required']);

//custom rule
const myRule = {
  params: [{
    name: 'str',
    isTarget: true
  }],
  message: '{_field_}の値と{_target_}の値"{str}"が一致しません。',
  validate(value, {str}) {
    return value == str;
  }
};
VeeValidate.extend('my_rule', myRule);

let app = new Vue({
  el: '#app',
  data: {
    value: '',
    value2: ''
  },
  methods: {
    submit: function(){
      alert('送信しました！');
    }
  }
});

<div id="app">
  <validation-observer ref="obs" v-slot="{invalid, validated, valid}">
    <div class="filed">
      <validation-provider name="field1" rules="required|my_rule:field2">
        <div slot-scope="{ errors }">
          <input type="text" name="field1" v-model="value" value="">
          <p class="error">{{ errors[0] }}</p>
        </div>
      </validation-provider>
      <validation-provider vid="field2" name="field2" rules="required">
          <div slot-scope="{ errors }">
            <input type="text" name="field2" v-model="value2" value="">
            <p class="error">{{ errors[0] }}</p>
          </div>
        </validation-provider>
    </div>
    <button type="button" @click="submit" :disabled="!valid">送信</button>
  </validation-observer>
</div>