如何使用 vee-validate 版本 3 上的自定义规则验证字段答案

【问题标题】：How to validate a field using a custom rule on vee-validate version 3如何使用 vee-validate 版本 3 上的自定义规则验证字段
【发布时间】：2020-01-09 19:42:33
【问题描述】：

我想在查询 API 的数据库中检查用户名的可用性。与评估字段的规则相关的代码是：

extend('exists', value => {
     apiService.checkUsername(value)
        .then(response => {
            response.data[0].username == value?true:false;
    })
        .catch(response => alert(response.message));
}, {
    immediate: false
})

我的问题是：错误消息显示在 API 响应之前。我想在回复后显示它。有什么想法吗？

【问题讨论】：

什么错误信息？
例如：'用户名存在'
你说的是.catch(response => alert(response.message));吗？抱歉，我无法理解您的问题。
没有。我的意思是：假设您正在尝试使用包含评估用户名是否存在的字段的表单在网站上注册（该字段调用 API 并且 API 发送包含有关信息的响应（JSON 对象）您请求的用户名和其他数据（如果用户名存在于数据库中）。如果系统收到该对象，表单将向您显示一条消息：“用户名不可用。尝试另一个”。我的问题是与如何以及何时在注册过程中显示该消息有关。抱歉，我是使用这项技术的新手。
这将发生在 .then() 部分内。您检查响应的值并相应地继续...

标签： javascript vue.js vee-validate

【解决方案1】：

从您的验证函数返回承诺 - 然后 vee-validate 将等到它完成后再做任何进一步的事情。我找不到任何参考，但我认为它应该可以工作。

extend('exists', value => {
     return apiService.checkUsername(value)
        .then(response =>
            response.data[0].username == value?true:false;
        )
        .catch(response => alert(response.message));
})

【讨论】：