我在这个验证功能上做得对吗？

Question

我想知道这个电子邮件验证功能是否正确，或者可以不同地完成。另外我想知道如何在不中断转换的情况下删除错误内容，我尝试使用 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>

Answer 1

我觉得还行，有几点：

input或change事件更适合监听输入。如果您想对输入的每次更改做出反应，请使用 input，例如击键，或从浏览器保存的电子邮件地址列表中选择电子邮件。如果您只希望处理程序在用户提交更改时运行，请使用 change，例如通过失去视野焦点。
要在隐藏时为错误元素设置动画，您需要监听 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>

我在这个验证功能上做得对吗？

Am I doing things properly on this validation function?

javascript

css

validation

addeventlistener

css-transitions