Vue.js自定义验证指令的问题

Question

我在 vue.js 中有一个自定义验证指令。验证器在文本框中输入时工作正常，但是一旦我调用this.$validator.validateAll()，它就会通过验证，即使它不应该。

我在这里做错了什么？

验证码

//validiates email in database. if email is not same as initial and email is taken, it will fail validation
VeeValidate.Validator.extend('unique-email', {
    messages: {
        hr: (field, args) => {
            return "Some error message";
        }
    },
    validate: (value, args) => {
        var initialEmail = args[0];
        if (initialEmail === value) {
            return { valid: true }
        } else {
            return profileService.emailTaken(value).then((response) => {
                var emailTaken = response.data;
                return {valid:!emailTaken};
            });
        }
    }
});

"保存"按钮

 methods: {
    save: function() {
        this.$validator.validateAll().then(() => {
            //should not enter here, but it does
        });
    }
},

Html elemenent

 <input type="text" class="form-control" name="EMail" v-validate="'required|unique-email:'+ initialEmail" v-model="profile.EMail"/>

Answer 1

我验证了同样的问题。我不确定问题是什么。这个问题似乎在这里讨论过，但似乎并没有真正解决。

不过，我确实有一个解决方法。如果验证失败，errorBag $ validator 属性似乎设置正确，因此您可以在 save 方法中检查它。

save: function() {
    this.$validator.validateAll().then(() => {
        const err = this.$validator.getErrors();
        if (err.errors.length > 0)
            //failed validation
        else
            //passed validation
    });
}