VueJS-Vee-验证：调用方法/函数来评估结果的自定义规则？

Question

抱歉，我对VueJS及其框架还是很陌生。

我试图使用vee-valester和自定义规则来检查针对AxiosGET响应的API后端的输入字段的值。本质上，如果您输入一个无效的ID，它会抛出一个错误，直到您正确地获得它（即：将票证分配给一个有效的员工，您必须输入一个有效的员工ID）。

我的模板代码现在看起来像这样：

     <b-col cols="4">
        <b-input-group>
          <b-input-group-text style="width:150px;" slot="prepend">Key Owner</b-input-group-text>
          <input
            class="form-control"
            v-model="selected_owner_id"
            type="text"
            id="ownerId"
            name="ownerId"
            data-vv-delay="800"
            @change="validateCorpId"
            v-validate="'ownerId|required'"
            v-bind:class="{'form-control': true, 'error': errors.has('ownerId') }"
          >
        </b-input-group>
        <span v-show="errors.has('ownerId')" class="text-danger">{{ errors.first('ownerId') }}</span>
      </b-col>

（我正在处理如何做到这一点，因此对实际执行AxiosAPI调用的函数进行了@更改）

这是我在同一个*中制定的验证扩展规则。如上所述的vue文件：

<script>
import { Validator } from "vee-validate";
import VeeValidate from 'vee-validate'

Validator.extend('ownerId', {
  // Custom validation message
  getMessage: (field) => `The ${field} is not a valid ID.`,
  // Custom validation rule
  validate: (value) => new Promise(resolve => {        
    resolve({
        valid: value && (this.validateCorpId(value))
      });
  })
});

...etc...

validateCorpId（value）函数稍后位于methods:{}块中

我一直在尝试浏览Vee Validate文档，了解如何正确创建自定义验证规则，但作为一名新手，仍然缺少很多东西，比如，应该在哪里进行验证。你真的坐吗？我把它放在“脚本”区域的顶部，还是放在“创建”或“装载”函数的内部？

我确实试过了，但它马上就被调用了，这不是我想要的——我只希望当用户在它调用函数的字段中输入或更改数据时，它会调用返回真|假值的函数。

我还将一个名为is_selected_owner_id_valid的字段添加到“data”返回块中，并根据结果将我的Axios调用设置为true | false，但由于它是一个布尔值，验证规则会立即读取它，并且计算结果不正确。

我很高兴继续为自己工作，但有没有人有一个完全可以工作的自定义规则，我可以看到和反向工程？真的很难找到一个例子来说明我正在尝试做什么，将API调用作为规则的一部分。

Answer 1

最初，我在这里复制了类似的帖子答案，从而解决了我的问题：

Vee validate（VueJS）-异步评估条件

虽然它可以工作，但我不相信在自定义规则中有实际的APi调用。但是，多亏了Walter Cejas的建议，我将把我的解决方案重新组合到该示例中，提供：https://baianat.github.io/vee-validate/examples/async-backend-validation.html

（我以为我已经看完了所有的vee验证示例…我错了！）