验证电子邮件，添加事件侦听器键入功能

问题描述

我已经完成了此功能，使我可以验证电子邮件输入。它会显示一条错误消息，直到正确编写电子邮件为止。正确时，将删除消息。但是，如果我删除输入的电子邮件，则错误消息仍然存在。我尝试了if（input.value ===“”），但是什么也没有。如果有人可以帮助我，我将不胜感激。预先感谢。

Float

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

    eventListeners();

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

    function validateEmail() {

      const email = document.querySelector('.email'),inputEmail = document.querySelector('#email'),formatEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      if (inputEmail.value.match(formatEmail)) {
        email.removeChild(document.querySelector('.error'));
        alert("Valid email address!");
      } else {
        if (!document.querySelector('.error')) {

          if (inputEmail === "") {
            email.removeChild(document.querySelector('.error'));
          } else {
            const errorMessage = document.createElement('div');
            errorMessage.setAttribute('class','error');
            errorMessage.innerHTML = `<p>error</p>`;
            email.insertBefore(errorMessage,email.childNodes[4]);
          }
        }
      }
    }

---

我编辑了问题，现在可以了。

    <div class="campo email">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" placeholder="Email">
    </div>

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

eventListeners();

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

function validateEmail() {

  const email = document.querySelector('.email'),}))$/;
  if (inputEmail.value.match(formatEmail)) {
    email.removeChild(document.querySelector('.error'));
    alert("Valid email address!");
  } else {
    if (!document.querySelector('.error')) {
      const errorMessage = document.createElement('div');
      errorMessage.setAttribute('class','error');
      errorMessage.innerHTML = `<p>error</p>`;
      email.insertBefore(errorMessage,email.childNodes[4]);
    } else if (inputEmail.value === "") {
      email.removeChild(document.querySelector('.error'));
    }
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）