Vuevalidate异步验证结果到循环

时间:2018-08-19 15:52:24

标签: vuejs2 vue-validator

我正在使用Vue Validate

我的清单中有以下内容

      validations: {
        user_form: {
            email: {required,email, isUnique(value) {
                    // standalone validator ideally should not assume a field is required
                    if (value === '') return true;
                    // simulate async call, fail for all logins with even length
                    return new Promise((resolve, reject) => {
                       this.$http.post("v1/user-management/users/email-registeredi",{email:value}).then((res)=>{
                            console.log("res is ", res);
                            resolve(true);
                        },(err)=>{
                            reject(false)
                        })
                    })
                }},
            role: {required},
            password: {required}
        }
    },

上面的代码创建了一个无限的http请求循环,尤其是在收到错误消息时

我要去哪里了

2 个答案:

答案 0 :(得分:0)

如果vue validate无法很好地处理拒绝承诺并创建无限循环。
您可以尝试async await进行Vue验证的isUnique,并尝试捕获错误时返回false
像这样的东西。

validations: {
 user_form: {
  email: {
    required,
    email,
    async isUnique (value) {
        if (value === '') return true
        try{
          const response = await this.$http.post("v1/user-management/users/email-registeredi",{email:value})
          return true;
        }
        catch(e){
          return false;
        }   
      }
   }
 }

答案 1 :(得分:0)

您不需要使用“ new Promise”,因为vue-resource已经做到了。试试这个:

validations: {
    user_form: {
        email: {required,email, isUnique(value) {
                // standalone validator ideally should not assume a field is required
                if (value === '') return true;
                // simulate async call, fail for all logins with even length

               return this.$http.post("v1/user-management/users/email-registeredi",{email:value}).then((res)=>{
                    console.log("res is ", res);
                    return true;
                },(err)=>{
                    return false;
                });
            }},
        role: {required},
        password: {required}
    }
},