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

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

我觉得还可以，有几点：

1. 或事件更适合监听输入input。如果您想对输入的每次更改做出反应，例如击键，或从浏览器保存的电子邮件地址列表中选择电子邮件，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>