Question

我在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

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

Answer 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

Answer 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方法中注册验证器

自定义vee-validation在控制台日志中引发错误

2 个答案: