如何为vee-validate自定义验证器传递参数？

问题场景 #

我有一个自定义验证器，绑定到下拉组件时原本正常工作：

<select id="salesOwnerIdInput" v-model="currentCompany.salesOwnerId" name="salesOwnerId"
        v-validate.immediate="{ 'required': salesOwnerRequired, 'contains': !userHasPlanAccess }"
        :class="{'form-control': true, 'is-invalid': errors.has('main-tab.salesOwnerId') }"
        data-vv-as="Sales Owner" 
        data-vv-scope="main-tab">
    <option value="">- Select -</option>
    <option v-for="option in ownerList" v-bind:value="option.id" v-bind:key="option.id">
        {{ option.name }}
    </option>
</select>

但尝试给contains验证器添加参数时，写成下面的格式出现报错：

v-validate.immediate="{ 'required': salesOwnerRequired, 'contains:test': !userHasPlanAccess }"

错误信息：

vee-validate.esm.js:290 Uncaught (in promise) Error: [vee-validate] No such validator 'contains:test' exists.

自定义验证器代码：

const ContainsValidator = {
    params: [
        'message'
    ],
    getMessage(field, args) {
        return 'get message from args';
    },
    validate(value, args) {
        return false;
    }
}

我尝试在注册验证器时添加参数名称，但没有效果：

VeeValidate.Validator.extend("contains", ContainsValidator, { paramNames: ['message'] });

使用版本：vee-validate 2.1.4

解决方法 #

VeeValidate 2.x版本中，带参数的验证器不能用contains:test这种写法，框架会把整个字符串当成不存在的验证器名。正确的传参方式有两种：

方式1：数组格式 #

数组第一个元素是验证启用的布尔值，后面依次跟参数值：

v-validate.immediate="{ 
  'required': salesOwnerRequired, 
  'contains': [ !userHasPlanAccess, 'test' ] 
}"

方式2：对象格式 #

通过enabled字段控制验证是否启用，其他字段对应验证器声明的参数名：

v-validate.immediate="{ 
  'required': salesOwnerRequired, 
  'contains': { 
    enabled: !userHasPlanAccess, 
    message: 'test' 
  } 
}"

另外，注册验证器时不需要额外指定paramNames，你的验证器已经通过params属性声明了参数，直接注册即可：

VeeValidate.Validator.extend("contains", ContainsValidator);

内容的提问来源于stack exchange，提问作者Bassie