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

【问题标题】：Vue JS dynamic validation message gets disappered on navigating to other form fieldsVue JS 动态验证消息在导航到其他表单字段时消失
【发布时间】：2016-06-17 11:31:24
【问题描述】：

我正在使用 Vue JS 和 Vue Validator。

根据项目要求，我需要一些server-side 验证来检查重复条目。

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

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

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

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

请告诉我如何prevent隐藏错误信息，即动态设置？

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

【问题讨论】：

标签： javascript vue.js

【解决方案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

【讨论】：

工作就像一个魅力！非常感谢upvote..我在我的项目中遇到了Vue js版本的问题。更新到最新版本以及验证器 js 完成了这项工作。