Question

我使用vee验证了vuetify，我需要检查电子邮件是否唯一。所以我在vuejs中添加了

mounted(){

       extend('unique-email', (value) => {
         return this.$axios.post('/api/auth/unique-email', { email: value })
         .then((res) => {
          return {
            valid: true,
          };
        }, (err) => {
          return {
            valid: false,
            data: { message: 'Email already registered' }
          };
        })
        }, {
         immediate: false
       })
   }

在我的证词中，我添加了

<v-textfield v-model="form.email" rules="required|email|unique-emai">

以上内容适用于所有规则，但不能解析唯一电子邮件规则中的消息email already registred。我需要添加什么，以便如果异步验证失败，则显示错误部分的消息。

当前，当唯一电子邮件验证器失败时，它仅显示email is not valid消息。我想念什么？

Answer 1

如果您查看docs，似乎需要手动处理POST调用所产生的错误，因此，您不仅可以在错误处理程序中返回对象，还可以这样做：

   extend('unique-email', (value) => {
     return this.$axios.post('/api/auth/unique-email', { email: value })
     .then((res) => {
      return {
        valid: true,
      };
    }, (err) => {
      this.$refs.myValidationObserver.setErrors({
         email: ['Email already registered']
      });
    })
    }, {
     immediate: false
   })

这需要扩展之外的两项更改：

将属性vid="message"添加到v-textfield周围的ValidationProvider（VP）中
将属性ref="myValidationObserver"添加到将VP包装在点＃1的ValidationObserver中。

或者，也许我缺少了一些东西！您从哪儿得到了将问题中存在的对象归还的想法？我在当前文档中看不到类似的内容...

      return {
        valid: false,
        data: { message: 'Email already registered' }
      };

Answer 2

似乎您忘记收集错误信息，例如：

extend('unique-email', (value) => {
  return this.$axios.post('/api/auth/unique-email', { email: value })
    .then((res) => {
      return {
        valid: true,
      };
    }, (err) => {
      return {
        valid: false,
        data: { message: 'Email already registered' }
      };
    })
  }, 
  getMessage: (field, params, data) => data.message
)

顺便说一句，默认值为“ immediate：false”，您无需明确定义它。

扩展异步规则中的Vee验证消息无法显示错误消息

2 个答案: