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

Question

我正在研究 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>

当我运行这段代码时，它只给我最后一个值

谁能帮我如何在表单顶部显示错误消息？

Answer 1

你在这里犯了一个错误:

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

您需要附加 errorMsg ，而不是分配它。例如像这样:

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>"

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

顺便说一句，你在标签 <li> 中添加了错误.所以，你知道你还应该添加 <ol>或 <ul>列一个 list ？