VeeValidateのカスタムルールの設定方法（v3系）

基本となるサンプルとして、入力フォームに「kabanoki」と入力しないとエラーになるバリデーションルールを実装します。

コード

//呼び出し
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 ルール設定
VeeValidate.extend('required', VeeValidateRules['required']);

//カスタムルール設定
const myRule = {
  params: ['str'],
  message: '{_field_}が{str}と一致しません。',
  validate(value, {str}) {
    return value == str;
  }
};
VeeValidate.extend('my_rule', myRule);

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

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