Блог

Главная - Вопросы по программированию - Правильно ли я выполняю эту функцию проверки?

Правильно ли я выполняю эту функцию проверки?

#javascript #css #validation #css-transitions #addeventlistener

#javascript #css #проверка #css-переходы #addeventlistener

Вопрос:

Я хотел бы знать, правильно ли выполнена эта функция проверки электронной почты, или это можно сделать по-другому. Также я хотел бы знать, как я могу удалить содержимое ошибки, не прерывая переход, я пытаюсь, innerHTML = "" но переход перестает работать. Заранее спасибо.

 const email = document.querySelector('#email');

eventListeners();

function eventListeners() {
  email.addEventListener('keyup', validateEmail);
}

function validateEmail() {

  const email = document.querySelector('.email'),
    error = document.querySelector('.error'),
    inputEmail = document.querySelector('#email'),
    formatEmail = /^(([^<>()[]\.,;: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,}))$/;

  if (inputEmail.value.match(formatEmail)) {
    error.classList.remove("show");
  } else {
    if (inputEmail.value !== "") {
      error.innerHTML = `<p>error</p>`;
      error.classList.add("show")
    } else {
      error.classList.remove("show");
    }
  }
}  
 .error {
  width: 200px;
  max-height: 0;
  transition: max-height 1s ease-out;
  overflow: hidden;
  background: #d5d5d5;
  text-align: center;
}

.show {
  max-height: 100px;
  transition: max-height 1s ease-in;
}  
 <div class="name">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Name">
</div>
<div class="email">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Email">
  <div class="error"></div>
</div>
<div class="password">
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="Password">
</div>

Ответ №1:

Для меня это выглядит нормально, с несколькими пунктами:

  1. События input or change больше подходят для прослушивания ввода. Используйте input , если вы хотите реагировать на каждое изменение ввода, например, нажатия клавиш или выбор электронного письма из списка сохраненных адресов электронной почты браузера. Используйте change , если вы хотите, чтобы обработчик запускался только тогда, когда пользователь зафиксировал изменение, например, из-за потери фокуса поля.
  2. Чтобы анимировать элемент ошибки при скрытии, вам нужно прослушать transitionend событие и удалить содержимое только после его запуска. Это дает время для завершения анимации. В противном случае окно просто немедленно рухнет, и анимировать будет нечего.

 const email = document.querySelector('#email');

eventListeners();

function eventListeners() {
  email.addEventListener('input', validateEmail);
}

function validateEmail() {

  const email = document.querySelector('.email'),
    error = document.querySelector('.error'),
    inputEmail = document.querySelector('#email'),
    formatEmail = /^(([^<>()[]\.,;: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,}))$/;

  if (inputEmail.value.match(formatEmail)) {
    error.classList.remove("show");
  } else {
    if (inputEmail.value !== "") {
      error.innerHTML = `<p>error</p>`;
      error.classList.add("show")
    } else {
      error.addEventListener('transitionend', () => {
        error.innerHTML = '';
      }, {
        once: true
      });
      error.classList.remove("show");
    }
  }
}  
 .error {
  width: 200px;
  max-height: 0;
  transition: max-height 1s linear;
  overflow: hidden;
  background: #d5d5d5;
  text-align: center;
}

.error.show {
  max-height: 100px;
}  
 <div class="name">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Name">
</div>
<div class="email">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Email">
  <div class="error"></div>
</div>
<div class="password">
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="Password">
</div>

Комментарии:

1. Я очень благодарен тебе, Ричард. Это именно то, что я искал. Большое вам спасибо!

2. Рад, что могу помочь.