JavaScript表单验证错误：永远不会显示无效的电子邮件错误消息

我正在使用JavaScript开发一个表单验证程序类

首先，我检查（确保）所有必填字段都已填写。如果是，我验证电子邮件格式：

类FormValidator{
构造函数（）{
this.hasErrors=false；
this.emptyRequired=[]；
this.errorMsg=“”；
this.formToValidate=document.querySelector（“表单”）；
this.submitButton=this.formToValidate.querySelector（“输入[type=submit]”）；
}
appendErrorMessage（）{
const errorEl=`this.errorMsg}`；
this.emptyRequired.forEach（（字段）=>{
让parentEl=field.parentElement；
if（this.hasErrors==true&&parentEl.querySelectorAll（'.error message'）。长度==0）{
field.insertAdjacentHTML（'afterend'，errorEl）；
}
});
}
validateEmail（）{
this.hasErrors=false；
常数re=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\“+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.++]124；（[a-zA Z-0-9]+-Z].-/]；
const emailfield=this.formToValidate.querySelector（'input[type=email]'）；
if（this.emptyRequired.length==0）{
const action=re.test（emailfield）？“删除”：“添加”；
类列表[操作]（'is-invalid'）；
this.hasErrors=re.test（emailfield）？false:true；
this.errorMsg=“请提供有效的电子邮件”；
这个.appendErrorMessage（）；
}
}
validateRequired（）{
this.hasErrors=false；
this.emptyRequired=[]；
const requiredFields=this.formToValidate.querySelectorAll（'*[required]'）；
必填字段。forEach（（字段）=>{
//确保所有必填字段都有值
//在进行其他验证之前
如果（！field.value）{
this.hasErrors=true；
this.emptyRequired.push（字段）；
this.errorMsg=“此字段为必填项”；
这个.appendErrorMessage（）；
}
const action=field.value？'remove'：'add'；
field.classList[action]（'is-invalid'）；
});
}
validateForm（）{
这个.validateRequired（）；
这是validateEmail（）；
console.log（this.errorMsg）；
}
提交表格（e）{
e、 预防默认值（）；
这是validateForm（）；
}
init（）{
this.formToValidate.addEventListener（'submit'，e=>this.submitForm（e））；
}
}
const formValidator=new formValidator（）；
formValidator.init（）
。表单组{
位置：相对位置；
}
.错误消息{
保证金：0；
位置：绝对位置；
右：5px；
底部：-13px；
颜色：#a94442；
字体大小：11px；
}

联系我们
只有当
emptyRequired
为空时，您才调用
appendErrorMessage
，这样，
appendErrorMessage
中的循环就永远不会执行。@Teemu是的，因为我只在所有必填字段都不为空的情况下检查电子邮件的有效性。但代码不会执行您认为它会执行的操作。再次：仅当
this.emptyRequired
为空时，才调用
appendErrorMessage
。没有代码可以更改
this.emptyRequired
的长度，因此
this.emptyRequired.forEach
循环永远不会在
appendErrorMessage
方法中执行。
parentEl.querySelectorAll（'.error message'））.length==0
当且仅当长度为0时，才添加span。因此，条件变为false，span未在末尾添加。@ShashankGb当前代码从未达到该点。