Javascript 表单验证：当所有输入字段都为空时不显示消息

所以我正在练习Javascript，现在我正在尝试实现表单验证。 我遇到的一个问题是，当我在所有输入字段都为空的情况下单击按钮时，第一个字段（全名）只会高亮显示并显示一条消息（请签出代码段）。我想知道它是如何工作的——一次只能显示一条消息，还是有办法让所有输入字段改变颜色，并为每个空字段显示消息

函数验证表单（e）{
const eName=document.getElementById（“全名”）；
const eMail=document.getElementById（“电子邮件”）；
const ePhone=document.getElementById（“电话号码”）；
const ePass=document.getElementById（“密码”）；
const eCnfmPass=document.getElementById（“ConfirmPassword”）；
常量phoneno=/^\（？（[0-9]{3}）\）？[-.]（[0-9]{3}）[-.]？（[0-9]{4}）$/；
const fullNameText=“哦，请填写您的姓名”；
const emailText=“请输入有效的电子邮件”；
const phoneText=“请输入有效的电话号码”；
const passText=“请输入有效密码”；
const confirmText=“请确认您的密码”；
//名称输入验证-如果输入为空
如果（eName.value==“”）{
e、 预防默认值（）；
document.getElementById（“全名”）.style.borderColor=“红色”；
document.getElementById（“FullNameLabel”）.innerHTML=fullNameText；
document.getElementById（“FullNameLabel”）.style.color=“红色”；
返回false；
}
//电子邮件输入验证-如果输入为空
如果（eMail.value==“”）{
e、 预防默认值（）；
document.getElementById（“电子邮件”）.style.borderColor=“红色”；
document.getElementById（“EmailLabel”）.innerHTML=emailText；
document.getElementById（“EmailLabel”）.style.color=“红色”；
返回false；
}
//电话号码输入验证-如果输入为空
如果（ePhone.value==“”）{
e、 预防默认值（）；
document.getElementById（“电话号码”）.style.borderColor=“红色”；
document.getElementById（“PhoneNumberLabel”）.innerHTML=phoneText；
document.getElementById（“PhoneNumberLabel”）.style.color=“红色”；
返回false；
}
//电话号码输入验证-检查是否缺少号码或不是号码的字符
if（ePhone.value.match（phoneno））{
返回true；
}否则{
警报（“请检查您的电话号码并再次输入”）
//document.getElementById（“电话号码”）.style.borderColor=“红色”；
//document.getElementById（“PhoneNumberLabel”）.innerHTML=phoneText；
//document.getElementById（“PhoneNumberLabel”）.style.color=“红色”；
返回false；
}
//密码输入验证-如果输入为空
如果（ePass.value==“”）{
e、 预防默认值（）；
document.getElementById（“密码”）.style.borderColor=“红色”；
document.getElementById（“PasswordLabel”）.innerHTML=passText；
document.getElementById（“密码标签”）.style.color=“红色”；
返回false；
}
//确认密码输入验证-如果输入为空
如果（eCnfmPass.value==“”）{
e、 预防默认值（）；
document.getElementById（“ConfirmPassword”）.style.borderColor=“红色”；
document.getElementById（“ConfirmPswdLabel”）.innerHTML=confirmText；
document.getElementById（“ConfirmPswdLabel”）.style.color=“红色”；
}
}
//检查以确保密码和确认密码匹配
var passConfirm=函数（）{
if（document.getElementById（“密码”）.value==
document.getElementById（“ConfirmPassword”）.value）{
document.getElementById（“消息”）.style.color=“绿色”；
document.getElementById（“Message”）.style.fontwweight=“Heavy”；
document.getElementById（“消息”）.innerHTML=“密码匹配！”
}否则{
document.getElementById（“消息”）.style.color=“红色”；
document.getElementById（“Message”）.style.fontwweight=“Heavy”；
document.getElementById（“消息”）.innerHTML=“密码不匹配！”
}
}

全名

电子邮件

电话号码

密码

确认密码

给我报名！

你有太多的javascript代码，你可以简化很多

要检查任何输入是否为空，可以首先将所有输入存储在如下变量中：

let inputs = document.querySelectorAll('.form input') //This will make a Nodelist array of all the inputs inside the form.
let labels = document.querySelectorAll('.form label') //This will make a Nodelist array of the label tags inside the form

之后，您可以循环输入数组以查找是否有任何输入为空：

for (let i = 0; i < inputs.length; i++) {
    if (inputs.value.length == 0) {
        inputs[i].style.borderColor = 'red'
        label[i].textContent = 'Please fill in this input'
    }
}

for（设i=0；i

需要您的输入。为什么要费那么大的劲来确保他们都填好了

<input required>

删除所有返回的false；lines使用代码变量validation=true的开始（当它失败时）make it false在验证脚本的最后一行返回它要求输入从来都不是进行表单验证的好方法，在javascript中也不是。此必需属性可以在浏览器中删除，用户可以在不填写输入的情况下提交。Javascript也可以在用户提交之前删除。。。