nastya_zholudeva
@nastya_zholudeva

Как по событию @blur добавить класс и отобразить скрытый элемент?

Нужно чтобы если email введен не корректно показывался span и input добавлялся класс input_error. Все это должно происходить по событию @blur. Попробовала сделать на jQuery, но класс input_error не добавляется. Да и в целом хочется сделать на чистом Vue

<input class="no" type="text" name="log_in" id="log_in" placeholder="E-mail..." required v-model="login" :class="{ input_error: checkmail.error}" @blur="verificateLogin()">
<span  class="error valid">E-mail введен не корректно</span>

var emailRE = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

verificateLogin() {
                authParams['email'] = this.login;

                myObject.callApiPost('auth/checkmail', authParams, '').then((res) => {
                    this.checkmail = res.data;
                });

                if (!emailRE.test(this.login)) {
                    $('.valid').show();
                    console.log($('#log_in'));
                    $('#log_in').addClass('input_error');
                } else {
                    $('.valid').hide();
                }
            },
  • Вопрос задан
  • 285 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
data: () => ({
  value: '',
  error: false
}),
methods: {
  checkValue() {
    this.error = в зависимости от this.value;
  }
}

<input v-model="value" :class="{ error }" @blur="checkValue">
<span v-show="error">ошибка</span>

.error {
  border-color: red;
}

https://jsfiddle.net/ujr0bgLv/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы