vuelidate async validator - как отменить? - PullRequest
Новая
       25

vuelidate async validator - как отменить?

0 голосов
/ 19 октября 2018

Итак, у меня проблема с асинхронным валидатором в моем элементе формы электронной почты / пользователя.Каждый раз, когда печатается письмо, оно проверяет правильность.Если адрес электронной почты 30 символов, то это более 30 звонков!Кто-нибудь знает лучший способ отменить Vuelidate Custom валидатор?Когда я пытаюсь использовать debounce, я получаю всевозможные ошибки от vuelidate, так как он ожидает ответа. 

<div class="form-group">
    <label for="emailAddress">Email address</label>
    <input type="email" class="form-control col-md-6 col-sm-12" v-bind:class="{ 'is-invalid': $v.user.email.$error }" id="emailAddress" v-model.trim="$v.user.email.$model" @change="delayTouch($v.user.email)" aria-describedby="emailHelp" placeholder="email@example.com">
    <small v-if="!$v.user.email.$error" id="emailHelp" class="form-text text-muted">We'll never share your email with anyone.</small>
    <div class="error invalid-feedback" v-if="!$v.user.email.required">Email address is required.</div>
    <div class="error invalid-feedback" v-if="!$v.user.email.email">This is not a valid email address.</div>
    <div class="error invalid-feedback" v-if="!$v.user.email.uniqueEmail">This email already has an account.</div>
</div>

<script>
    import { required, sameAs, minLength, maxLength, email } from 'vuelidate/lib/validators'
    import webapi from '../services/WebApiService'
    import api from '../services/ApiService'

    const touchMap = new WeakMap();

    const uniqueEmail = async (value) => {
        console.log(value);
        if (value === '') return true;

        return await api.get('/user/checkEmail/'+value)
                    .then((response) => {
                        console.log(response.data);
                        if (response.data.success !== undefined) {
                            console.log("Email already has an account");
                            return false;
                        }
                        return true;
                    });
    } 

    export default {
        name: "Register",
        data() {
          return {
            errorMsg: '',
            showError: false,
            user: {
              firstName: '',
              lastName: '',
              email: '',
              password: '',
              password2: ''
            }
          }
        },
        validations: {
            user: {
                firstName: {
                    required,
                    maxLength: maxLength(64)
                },
                lastName: {
                    required,
                    maxLength: maxLength(64)
                },
                email: {
                    required,
                    email,
                    uniqueEmail //Custom async validator
                },
                password: {
                    required,
                    minLength: minLength(6)
                },
                password2: {
                    sameAsPassword: sameAs('password')
                }
            }
        },
        methods: {           
            onSubmit(user) {
                console.log(user);
                /*deleted*/

            },
            delayTouch($v) {
                console.log($v);
                $v.$reset()
                if (touchMap.has($v)) {
                    clearTimeout(touchMap.get($v))
                }
                touchMap.set($v, setTimeout($v.$touch, 1250))
            }
        }
    }
</script>

Когда я пытаюсь обернуть мою асинхронную функцию с debounce, vuelidate это не нравится, поэтому яудалил это.Не знаете, как ограничить пользовательский валидатор «uniqueEmail».

...