使用 vee-validate 进行自定义验证

Question

在我的 vue 2.5.17 应用程序中，我有一个 select 输入和文本输入，并且我创建了一个验证规则，其中只有一个必须被填充：

    <div class="form-row p-3">
        <label for="existing_user_list_id" class="col-12 col-sm-4 col-form-label">Select already existing list</label>
        <div class="col-12 col-sm-8">
            <v-select
                    v-model="selection_existing_user_list_id"
                    data-vv-name="selection_existing_user_list_id"
                    :options="userListsByUserIdArray"
                    v-validate="''"
                    id="existing_user_list_id"
                    name="existing_user_list_id"
                    class="form-control editable_field"
                    placeholder="Select existing user list"
                    v-on:input="onChangeSelectionExistingUserListId($event);"
            ></v-select>
            <span v-show="vueErrorsList.has('existing_user_list_id')" class="text-danger">{{ vueErrorsList.first('existing_user_list_id') }}</span>
        </div>
    </div>

    <div class="form-row p-1 m-1 ml-4">
        <strong>OR</strong>
    </div>

    <div class="form-row p-2`">
        <label for="new_user_list_title" class="col-12 col-sm-4 col-form-label">Create a new list</label>
        <div class="col-12 col-sm-8">
            <input class="form-control" value="" id="new_user_list_title" v-model="new_user_list_title" @change="onChangeBewUserListTitle($event);">
            <span v-show="vueErrorsList.has('title')" class="text-danger">{{ vueErrorsList.first('title') }}</span>
        </div>
    </div>

我找到了这个：
https://baianat.github.io/vee-validate/guide/custom-rules.html#creating-a-custom-rule

但我对如何在我的案例中使用它感到困惑。我试试 :

    import { Validator } from 'vee-validate';
    Validator.extend('new_user_list_title', {
        getMessage: field => 'The ' + field + ' value is not a valid new_user_list_title.',
        validate: value => false // for simplicity I try to raise error always
//        validate: value => value.length == 0 && selection_existing_user_list_id == null
    })

但我的自定义错误从未触发，即使我设置为始终为 false，

哪种方法正确？

谢谢！

Answer 1

添加自定义规则后，需要在组件中使用（in v-validate）：

<input 
  class="form-control" 
  id="new_user_list_title" 
  v-model="new_user_list_title" 
  @change="onChangeBewUserListTitle($event);"
  v-validate="'new_user_list_title'">

使用 vee-validate 进行自定义验证

With vee-validate make custom validation

vuejs2

vee-validate