自定义 vee 验证在控制台日志中引发错误答案

【问题标题】：Custom vee-validation throws error in console log自定义 vee 验证在控制台日志中引发错误
【发布时间】：2018-01-21 16:13:37
【问题描述】：

我在 vee-validate 中遇到自定义验证问题。我有这个方法，它正在检查我的数据库中是否已经存在电子邮件，但我不断收到错误Error in callback for watcher "email": "TypeError: Cannot read property 'then' of undefined"

这是我的 HTML 代码，其中包含验证 emailAlreadyExists

<div class="prepend-icon">
    <p :class="{ 'control': true }">
        <input v-validate="'required|email|emailAlreadyExists'"
               :class="{
                    'form-control input-lg': true,
                    'input': true,
                    'is-danger': errors.has('email')
                    }"
               name="email" type="email"
               v-bind:placeholder="$root.trans.translate('enterYourEmail')"
               v-model="email"
        />
        <i class="nc-icon-outline ui-1_email-83"></i>
        <span v-show="errors.has('email')" class="help-block with-errors">
                {{ errors.first('email') }}
            </span>
    </p>
</div>

这是我在创建方法中的验证

created() {
    this.$validator.extend('emailAlreadyExists', {
        getMessage: field => field + 'Email already exists.',
        validate: value => {
            let params = new URLSearchParams();
            params.append('email', value);
            this.$http.post(this.$apiUrl + `rest/api/public/User/checkIfUserExists`, params, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            })
        }
    })
}

这是我在控制台日志中不断出现的错误

您可以在此处查看整个文件： PasteBinLink

有人可以指出我做错了什么，我一直收到这个错误吗？如果您需要任何其他信息，请告诉我，我会提供。谢谢！

【问题讨论】：

您能添加整个注册组件吗？
A 已将粘贴 bin 链接添加到整个文件

标签： vuejs2 vee-validate

【解决方案1】：

您的验证函数没有返回任何内容。根据文档中的示例进行自定义验证：

validate(value) {
  return new Promise(resolve => {
    resolve({
      valid: value === 'trigger' ? false : !! value,
      data: value !== 'trigger' ? undefined : { message: 'Not this value' }
    });
  });
}

注意返回的承诺。

见：

http://vee-validate.logaretm.com/rules.html#custom-rules

【讨论】：

【解决方案2】：

嗯，文档不清楚，但我是这样解决的：

app.js

new Vue({
    el: '#root',
    created() {
        this.$validator.extend('emailAlreadyExists',{
    getMessage: field => field + ' already exists.',
    validate: value => {
        return new Promise(resolve => {
            axios.get('/skills')
                .then(function (response) {
                    console.log(response.data[0]);
                    resolve({
                        valid: response.data[0],
                        data: value !== 'trigger' ? undefined : {message: 'Not this value'}
                    });
                })
                .catch(function (error) {
                    // handle error
                    console.log(error);
                })
                .then(function () {
                    // always executed
                });

        });
    }
});
    }
});

还有html

 <input type="text" v-validate="'required|email|emailAlreadyExists'"  v-bind:class="[errors.first('email') ? 'registration_error' : '', 'form-control ']" name="email"/>

看来您必须在created 方法中注册验证器

【讨论】：