如何解决验证电子邮件,添加事件侦听器键入功能
我已经完成了此功能,使我可以验证电子邮件输入。它会显示一条错误消息,直到正确编写电子邮件为止。正确时,将删除消息。但是,如果我删除输入的电子邮件,则错误消息仍然存在。我尝试了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 举报,一经查实,本站将立刻删除。