Валидация VUEJS

Question

Написал свой валидатор который летает на сервер и ищет зарегистрирован ли такой email. Проблема заключается в том что при каждом вводе символа в input летит запрос на сервер, как сделать чтобы запрос летел при потере фокуса у input?

<input
                        v-model="email"
                        @blur="$v.email.$touch()"
                        :class="{'is-invalid' : $v.email.$error}"
                        type="email" class="form-control"
                        id="exampleInputEmail1"
                        aria-describedby="emailHelp">

Валидатор

validations: {
        email: {
            required,
            email,
            async uniqEmail(newEmail){
                if(newEmail === '') return true
                const response = await fetch('http://localhost:3000/user/uniqEmail',{
                    headers: {"Content-Type": "application/json"},
                    method: 'POST',
                    body: JSON.stringify({newEmail})
                })
                const res = await response.json()
                console.log(res.uniq)
                return res.uniq
            }
        }

Сервер возвращает либо true либо false

Answer 1

Вот пример с боевого проекта. Здесь запрос отправляется лишь тогда, когда email валиден.

const exists = async (value, vm) => {
  if (vm.$v.email.email && value !== '') {
    const response = await auth.fetchSignInMethodsForEmail(value);
    return !response.length;
  } else {
    return true;
  }
};


export default {
  ...
  validations: {
    email: {
      email,
      required,
      exists,
    },
  }
  ...
}

БЛОГ НА HUSL

Валидация VUEJS

Ответы (1 шт):