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

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&nbsp;您只希望处理程序在用户提交更改时运行，例如通过失去字段焦点。要在隐藏时为错误元素设置动画，您需要侦听该transitionend事件，并且仅在该事件触发后才删除内容。这使动画有时间完成。否则，盒子会立即坍塌，没有任何动画。const email = document.querySelector('#email');eventListeners();function eventListeners() {&nbsp; email.addEventListener('input', validateEmail);}function validateEmail() {&nbsp; const email = document.querySelector('.email'),&nbsp; &nbsp; error = document.querySelector('.error'),&nbsp; &nbsp; inputEmail = document.querySelector('#email'),&nbsp; &nbsp; 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,}))$/;&nbsp; if (inputEmail.value.match(formatEmail)) {&nbsp; &nbsp; error.classList.remove("show");&nbsp; } else {&nbsp; &nbsp; if (inputEmail.value !== "") {&nbsp; &nbsp; &nbsp; error.innerHTML = `<p>error</p>`;&nbsp; &nbsp; &nbsp; error.classList.add("show")&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; error.addEventListener('transitionend', () => {&nbsp; &nbsp; &nbsp; &nbsp; error.innerHTML = '';&nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; once: true&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; error.classList.remove("show");&nbsp; &nbsp; }&nbsp; }}.error {&nbsp; width: 200px;&nbsp; max-height: 0;&nbsp; transition: max-height 1s linear;&nbsp; overflow: hidden;&nbsp; background: #d5d5d5;&nbsp; text-align: center;}.error.show {&nbsp; max-height: 100px;}<div class="name">&nbsp; <label for="name">Name:</label>&nbsp; <input type="text" id="name" name="name" placeholder="Name"></div><div class="email">&nbsp; <label for="email">Email:</label>&nbsp; <input type="email" id="email" name="email" placeholder="Email">&nbsp; <div class="error"></div></div><div class="password">&nbsp; <label for="password">Password:</label>&nbsp; <input type="password" id="password" name="password" placeholder="Password"></div>