javascript - Vue JS 动态验证消息在导航到其他表单字段时消失

Question

我正在使用 Vue JS 和 Vue Validator。

根据项目要求，我需要一些服务器端验证来检查重复条目。

为此，我在 email_id 字段上放置了一个 watcher ，在更改该字段时，ajax 请求会返回无论提供的电子邮件地址是否重复( true 或 false)。

如果false，那么我需要动态设置错误。

一切正常，但问题是，表单上任何字段模糊时错误消息会自动消失。

您可以在这里查看我的代码:https://jsfiddle.net/m670da45/23/

请告诉我如何防止隐藏错误消息，即动态设置？

P.S.为了便于理解，我没有使用ajax请求，而是设置了电子邮件地址“xyz@xyz.com”。在电子邮件字段中插入给定的电子邮件地址，然后导航到备用电子邮件字段，再次导航到电子邮件字段将隐藏错误消息。

Answer 1

您可以创建一个自定义验证器，它返回 Promise像这样:

Vue.validator('exist', function (val, arg) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      if (val === 'xyz@xyz.com') {
        reject()
      } else {
        resolve()
      }
    }, 1000)
  })
})

https://jsfiddle.net/pespantelis/m670da45/24/

有关异步验证的更多详细信息，您可以查看文档中的相关部分:http://vuejs.github.io/vue-validator/en/async.html