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

Posted 2023-02-23

【中文标题】VueJS - Vee-Validate：调用方法/函数来评估结果的自定义规则？

【英文标题】：VueJS - Vee-Validate: Custom rule to call method/function to evaluate a result?

【发布时间】：2019-05-10 19:31:46

【问题描述】：

抱歉，我对 VueJS 和它的框架还是很陌生。

我正在尝试使用 vee-validate 和自定义规则来根据 Axios GET 对 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>

（我正在搞砸如何做到这一点，因此 @change 对实际执行 Axios API 调用的函数）

这是我在与上面相同的 *.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) 函数稍后在方法中： 块

我一直在尝试阅读 Vee-Validate 文档，了解如何正确创建自定义验证规则，但作为新手，很多东西似乎仍然缺失，比如 Validate.extend 应该放在哪里？我将它放在“脚本”区域或“创建”或“安装”功能中的哪个位置？

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

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

我很高兴继续为自己工作，但有没有人有一个完全有效的验证自定义规则我可以​​看到和逆向工程？真的很难找到我正在尝试做的事情的示例，将 API 调用作为规则的一部分。

【问题讨论】：

嗨，你看到这个例子了吗？您应该为您的 api 调用修改 isUnique 方法并调整响应：baianat.github.io/vee-validate/examples/…

我认为这正是我想要的。通过在此处复制此人的示例，我确实设法让我的工作：***.com/questions/44106256/… 但我不确定将实际的 APi 调用放入自定义规则本身是否正确。我喜欢你提供的那个例子，并且会复古。谢谢！

【参考方案1】：

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

Vee-validate (VueJS) - evaluating a condition asynchronously

虽然它有效，但我不相信在自定义规则中有实际的 APi 调用。但是，感谢 Walter Cejas 的建议，我将在提供的示例中改进我的解决方案：https://baianat.github.io/vee-validate/examples/async-backend-validation.html

（我以为我已经完成了所有 vee-validate 示例……我错了！）