如何仅使用JavaScript准确显示两个以上输入字段的表单验证错误消息？

我创建了一个JavaScript函数，在提交输入时检查表单，如果没有输入，则显示错误消息

当不提供任何输入时，它可以完美地工作。它正确显示所有错误消息

问题：但是如果我只将第一个字段留空，即

全名

；if循环停止在那里，并且不显示第二或第三条错误消息，即

streetaddr

&

数量

注意：只有在第一个字段（即

fullname

）中没有添加

streetaddr

或

quantity

中的一个字段时，才会发生此错误

如何正确显示错误消息。根据空白输入，不管输入字段是第一个还是第二个或第三个。 此外，我更喜欢只使用普通JavaScript，而不使用框架/库。我在努力学习

链接：

/*检查表单函数*/
函数检查表（）{
window.alert（“您单击了提交！”）；
var fullNameCheck=document.getElementById（“fullname”）；
var addressCheck=document.getElementById（“streetaddr”）；
var quantityCheck=document.getElementById（“数量”）；
var为有效=错误；
/*If语句检查文本框是否为空*/
如果（fullNameCheck.value==“”&&addressCheck.value==“”&&quantityCheck.value==“”）{
document.getElementById（“nameerrormsg”）.style.display=“inline”；
document.getElementById（“addrerrormg”）.style.display=“inline”；
document.getElementById（“qtyerrormsg”）.style.display=“inline”；
is_valid=false；
}else if（fullNameCheck.value==“”）{
document.getElementById（“nameerrormsg”）.style.display=“inline”；
document.getElementById（“addrerrormg”）.style.display=“无”；
document.getElementById（“qtyerrormsg”）.style.display=“无”；
is_valid=false；
}else if（addressCheck.value==“”）{
document.getElementById（“addrerrormg”）.style.display=“inline”；
document.getElementById（“nameerrormsg”）.style.display=“无”；
document.getElementById（“qtyerrormsg”）.style.display=“无”；
is_valid=false；
}else if（quantityCheck.value==“”）{
document.getElementById（“qtyerrormsg”）.style.display=“inline”；
document.getElementById（“nameerrormsg”）.style.display=“无”；
document.getElementById（“addrerrormg”）.style.display=“无”；
is_valid=false；
}否则{
document.getElementById（“nameerrormsg”）.style.display=“无”；
document.getElementById（“addrerrormg”）.style.display=“无”；
document.getElementById（“qtyerrormsg”）.style.display=“无”；
is_valid=true；
}退货有效；
}

.errormsg{
颜色：红色；
背景颜色：黄色；
显示：无；
}

个人资料

全名：

请在上面输入您的姓名


街道地址：

请输入您的街道地址


数量：

请输入您的数量

您可以像最初一样隐藏所有错误文本。然后根据输入失败显示错误文本

/*检查表单函数*/
函数检查表（）{
window.alert（“您单击了提交！”）；
var fullNameCheck=document.getElementById（“fullname”）；
var addressCheck=document.getElementById（“streetaddr”）；
var quantityCheck=document.getElementById（“数量”）；
var为有效=错误；
/*If语句检查文本框是否为空*/
document.getElementById（“nameerrormsg”）.style.display=“无”；
document.getElementById（“addrerrormg”）.style.display=“无”；
document.getElementById（“qtyerrormsg”）.style.display=“无”；
is_valid=true；
如果（fullNameCheck.value==“”）{
document.getElementById（“nameerrormsg”）.style.display=“inline”；
is_valid=false；
}
如果（addressCheck.value==“”）{
document.getElementById（“addrerrormg”）.style.display=“inline”；
is_valid=false；
}
如果（quantityCheck.value==“”）{
document.getElementById（“qtyerrormsg”）.style.display=“inline”；
is_valid=false；
}
退货有效；
}

.errormsg{
颜色：红色；
背景颜色：黄色；
显示：无；
}

个人资料

全名：

请在上面输入您的姓名


街道地址：

请输入您的街道地址


数量：

请输入您的数量

我更愿意将字段设置为必需的，不需要Javascript：

个人资料

全名：


街道地址：


数量：

谢谢！你的方法最容易理解。这个答案适合初学者。好的！问题：有没有办法将语句与

一起使用，如果
？对if语句的多次调用有点复杂，如果不可能，则不执行Else。因为Else if只在语句失败时执行。对于你的情况，如果不可能的话。而且多if并不复杂。如果你需要一个更简单的版本，使用任何循环，比如next answer，我喜欢你解决这个问题的方式！这有点复杂。但从另一个角度来看，这确实有帮助。使用
for
循环和
if
语句非常有趣。谢谢你的独奏