如何使用JavaScript在同一页面上显示多条错误消息

我正在编写java脚本，我只停留在一个阶段。在我的项目中，我必须在提交表单时验证所有字段，并在表单字段上方的顺序列表中的同一页上显示错误消息。下面是我的密码

function validation(){
    var errorMsg=new Array(); 
    //var errorMsg = "";
    if(document.getElementById("fullname").value = " "){
        errorMsg[0] = "Please Enter Full Name\n"
}
if(document.getElementById("street").value = " "){
        errorMsg[1]= "Please Enter Street Name\n"
}
if(document.getElementById("postcode").value = " "){
        errorMsg[2]= "Please Enter Postlecode\n"
}
if(document.getElementById("phone").value = " "){
        errorMsg[3]= "Please Enter Phone Number\n"
}
if(document.getElementById("email").value = " "){
        errorMsg[4]= "Please Enter Email Id\n"
}
if(errorMsg!=" "){
    var r =" ";
    for(var i=0;i<=errorMsg.length-1;i++){
    document.getElementById("error").innerHTML="<li>"+errorMsg[i]+"</li>"
    }   
    return false;
}
}
</script>

函数验证（）{
var errorMsg=新数组（）；
//var errorMsg=“”；
if（document.getElementById（“fullname”）.value=”“）{
errorMsg[0]=“请输入全名\n”
}
if（document.getElementById（“street”）.value=”“）{
errorMsg[1]=“请输入街道名称\n”
}
if（document.getElementById（“postcode”）.value=”“）{
errorMsg[2]=“请输入Postlecode\n”
}
if（document.getElementById（“phone”）.value=”“）{
errorMsg[3]=“请输入电话号码\n”
}
if（document.getElementById（“email”）.value=”“）{
errorMsg[4]=“请输入电子邮件Id\n”
}
如果（errorMsg！=“”）{
var r=“”；
对于（var i=0；i您必须使用
==
或
=
而不是
if
语句中的
=
。
您必须使用
==
或
=
而不是
if
语句中的
=
。
这是因为“error”的内部HTML总是被替换。因此只显示最后一个值

试试下面的链接

这是因为“error”的innerHtml总是被替换。所以只显示最后一个值

试试下面的链接

您需要将每个错误附加到现有的
.innerHTML
中，而不是覆盖现有的：

document.getElementById("error").innerHTML += "<li>"+errorMsg[i]+"</li>"
// note += instead of = here --------------^

…其中任何一个都将添加到数组的末尾。然后要测试是否存在任何错误，请执行以下操作：

if (errorMsg.length > 0)

另外，if语句中的条件都在执行赋值，因为它们在应该使用
==
（或
==
）的位置使用
=
），并且您正在测试每个字段是否包含单个空格：
“
，我认为您希望通过与空字符串比较来测试每个字段是否为空：
”
您需要将每个错误附加到现有的
.innerHTML
中，而不是覆盖现有的：

document.getElementById("error").innerHTML += "<li>"+errorMsg[i]+"</li>"
// note += instead of = here --------------^

…其中任何一个都将添加到数组的末尾。然后要测试是否存在任何错误，请执行以下操作：

if (errorMsg.length > 0)

另外，if语句中的条件都在执行赋值，因为它们在应该使用
==
（或
==
）的位置使用
=
），并且您正在测试每个字段是否包含单个空格：
“
，我认为您希望通过与空字符串比较来测试每个字段是否为空：
”
您在这里犯了一个错误：

document.getElementById("error").innerHTML="<li>"+errorMsg[i]+"</li>"

如果要在页面顶部显示错误消息，应在需要的位置创建div，为该div提供id并将innerHtml设置为该div：

<div id="AllErrors"></div>

document.getElementById("AllErrors").innerHTML+="<li>"+errorMsg[i]+"</li>"


document.getElementById（“AllErrors”）.innerHTML++=“
”+errorMsg[i]+“
”

此外，您还可以在用户键入时改进验证和验证字段，而不是在用户提交所有信息之后

顺便说一句，您在标签
中添加了错误。因此，您知道您还应该添加
或
来创建一个列表？
您这里有一个错误：

document.getElementById("error").innerHTML="<li>"+errorMsg[i]+"</li>"

如果要在页面顶部显示错误消息，应在需要的位置创建div，为该div提供id并将innerHtml设置为该div：

<div id="AllErrors"></div>

document.getElementById("AllErrors").innerHTML+="<li>"+errorMsg[i]+"</li>"


document.getElementById（“AllErrors”）.innerHTML++=“
”+errorMsg[i]+“
”

此外，您还可以在用户键入时改进验证和验证字段，而不是在用户提交所有信息之后

顺便说一句，您在标记
中添加了错误。因此，您知道您也应该添加
或
来创建一个列表？
=
是赋值运算符。在
if
语句中，您必须使用等于
=
或完全等于
==
（同时检查类型）

您还需要在语句列表中使用添加到现有运算符
+=
：

if(document.getElementById("fullname").value == " "){
    errorMsg[0] = "Please Enter Full Name\n"
}
if(document.getElementById("street").value == " "){
    errorMsg[1]= "Please Enter Street Name\n"
}
if(document.getElementById("postcode").value == " "){
    errorMsg[2]= "Please Enter Postlecode\n"
}
if(document.getElementById("phone").value == " "){
    errorMsg[3]= "Please Enter Phone Number\n"
}
if(document.getElementById("email").value == " "){
    errorMsg[4]= "Please Enter Email Id\n"
}
for(var i=0;i<=errorMsg.length-1;i++){
    document.getElementById("error").innerHTML += "<li>"+errorMsg[i]+"</li>"
}  

if（document.getElementById（“全名”）.value==“”）{
errorMsg[0]=“请输入全名\n”
}
if（document.getElementById（“street”）.value==“”）{
errorMsg[1]=“请输入街道名称\n”
}
if（document.getElementById（“postcode”）。值=“”）{
errorMsg[2]=“请输入Postlecode\n”
}
if（document.getElementById（“电话”）.value==“”）{
errorMsg[3]=“请输入电话号码\n”
}
if（document.getElementById（“email”）.value==“”）{
errorMsg[4]=“请输入电子邮件Id\n”
}
for（var i=0；i
=
是赋值运算符。在
if
语句中，必须使用等于
=
或完全等于
=
（同时检查类型）

您还需要在语句列表中使用添加到现有运算符
+=
：

if(document.getElementById("fullname").value == " "){
    errorMsg[0] = "Please Enter Full Name\n"
}
if(document.getElementById("street").value == " "){
    errorMsg[1]= "Please Enter Street Name\n"
}
if(document.getElementById("postcode").value == " "){
    errorMsg[2]= "Please Enter Postlecode\n"
}
if(document.getElementById("phone").value == " "){
    errorMsg[3]= "Please Enter Phone Number\n"
}
if(document.getElementById("email").value == " "){
    errorMsg[4]= "Please Enter Email Id\n"
}
for(var i=0;i<=errorMsg.length-1;i++){
    document.getElementById("error").innerHTML += "<li>"+errorMsg[i]+"</li>"
}  

if（document.getElementById（“全名”）.value==“”）{
errorMsg[0]=“请输入全名\n”
}
if（document.getElementById（“street”）.value==“”）{
errorMsg[1]=“请输入街道名称\n”
}
if（document.getElementById（“postcode”）。值=“”）{
errorMsg[2]=“请输入Postlecode\n”
}
if（document.getElementById（“电话”）.value==“”）{
errorMsg[3]=“请输入电话号码\n”
}
if（document.getElementById（“email”）.value==“”）{
errorMsg[4]=“请输入电子邮件Id\n”
}
对于（var i=0；i我稍微重写了您的代码。以下是我更改的内容：


我使用了
！
运算符，而不是检查值是否等于
“”
我在数组上使用了
push
而不是按索引追加。这意味着数组中没有空点。
push
在数组末尾添加一个元素，与索引无关
我在数组上使用了一个
forEach
循环，它遍历所有可枚举元素，而不管有多少个

例如：

JS
//这可以在表单提交时完成，我使用了一个小提琴按钮。
document.getElementById（“按钮”）.onclick=