Question

对不起，我还是VueJS及其框架的新手。

我正在尝试使用vee-validate和自定义规则来根据对API后端的Axios GET响应检查输入字段的值。本质上，如果输入无效的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>

（我搞不清楚如何执行此操作，因此@change实际执行Axios API调用的功能）

这是我在与上述相同的* .vue文件中制定的Validate扩展规则：

<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）函数稍后将在方法中：{}块

我一直在尝试查看Vee-Validate文档，以了解如何正确创建自定义验证规则，但是作为一个新手，很多东西似乎仍然缺少，例如Validate.extend应该放在哪里？我在“脚本”区域或“创建”或“装载”函数中放在顶部的位置？

我确实尝试过，它立即被调用，这不是我想要的-我只希望当您在用户输入或更改它调用返回true | false值的函数的字段中的数据时发生

我还在“数据”返回块中添加了一个名为is_selected_owner_id_valid的字段，并根据结果将Axios调用设置为true | false，但由于它是布尔值，因此Validate规则会立即读取它并对其进行错误评估。 / p>

我很高兴为自己继续努力，但是有人能看到我能看到并进行反向工程的完全有效的Validate自定义规则吗？真的很难找到我想做的事的示例，其中涉及到API调用作为规则的一部分。

Answer 1

我设法通过在此处最初复制以下类似的已发布答案来解决问题：

Vee-validate (VueJS) - evaluating a condition asynchronously

虽然有效，但我不认为要在自定义规则中进行实际的APi调用。但是，由于沃尔特·塞亚斯（Walter Cejas）的建议，我将使我的解决方案适应以下提供的示例：https://baianat.github.io/vee-validate/examples/async-backend-validation.html

（我以为我已经看过所有vee-validate示例...我错了！）

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

1 个答案: