我在这个验证函数上做得正确吗

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>