1

我正在处理 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>

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

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

4

7 回答 7

3

你这里有一个错误：

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

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

顺便说一句，您在 tag 中添加了错误<li>。那么，您知道您还应该添加<ol>或<ul>制作列表吗？

于 2012-12-05T06:47:31.403 回答
1

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

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

虽然可以完全跳过循环并这样做：

document.getElementById("error").innerHTML = "<li>"+errorMsg.join("</li><li>")+"</li>";

（该.join()方法将所有数组元素放入由指定文本分隔的字符串中。）

此外，如果仅满足您的某些条件，则您的数组将具有未定义（缺失）的元素，因为您明确设置了特定索引，这意味着您将添加<li>其中显示“未定义”的元素。你应该这样做：

    errorMsg.push("Please Enter Full Name\n");
    // OR
    errorMsg[errorMsg.length] = "Please Enter Full Name\n";

...其中任何一个都将添加到数组的末尾。然后测试是否有任何错误：

if (errorMsg.length > 0)

此外，您的 if 语句中的条件都在进行赋值，因为它们使用=它们应该使用的位置===（或==），并且您正在测试每个字段是否包含一个空格：" "我认为您想通过比较来测试每个字段是否为空空字符串：""。

于 2012-12-05T06:47:22.230 回答
1

我重写了你的代码。这是我所做的更改：

  • 我没有检查值是否等于" "，而是使用了!运算符。
  • 我push在数组上使用过，而不是按索引追加。这意味着您的阵列中没有空位。push将元素添加到数组的末尾，而不考虑索引。
  • 我forEach在数组上使用了一个循环。这会遍历所有可枚举的元素，无论有多少。

所以，这个例子：

JS

// This could be done on form submit, I used a button for the fiddle.
document.getElementById("button").onclick = function () {   
    var errorMsg = new Array();

    if(!document.getElementById("fullname").value){
        errorMsg.push("Please Enter Full Name");
    }

    if(!document.getElementById("street").value){
        errorMsg.push("Please Enter Street Name");
    }

    if(!document.getElementById("postcode").value){
        errorMsg.push("Please Enter Postal Code");
    }

    if(!document.getElementById("phone").value){
        errorMsg.push("Please Enter Phone Number");
    }

    if(!document.getElementById("email").value){
        errorMsg.push("Please Enter Email Id");
    }

    var messageHtml = "";

    errorMsg.forEach(function (message) {
        messageHtml += "<li>" + message + "</li>";
    });

    document.getElementById("error").innerHTML = messageHtml;
};

看到这个小提琴：http: //jsfiddle.net/M48gA/

于 2012-12-05T06:51:33.870 回答
0

您必须使用===or==而不是=inif语句。

于 2012-12-05T06:41:10.163 回答
0

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

试试下面的链接

是否可以在不破坏后代事件侦听器的情况下附加到 innerHTML？

于 2012-12-05T06:45:29.120 回答
0

=是赋值运算符。在您的if语句中，您必须使用等于==或完全等于===（也检查类型）。

您还需要+=在语句列表中使用 add to existing 运算符：

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>"
}
于 2012-12-05T06:48:47.107 回答
0

我想您可以简单地尝试在每种情况下将错误消息附加到标签。

插入数组会将“未定义”值放入数组中。例如，如果您输入了有效的全名，那么errorMsg[0] 将不会有任何内容。如果您输入无效的街道，errorMsg[1] 将有一个条目“请输入街道名称\n”。

现在，当您要提交表单时，例如使用提交按钮，您将收到无效街道的错误消息，但会在数组的第一个位置获得“未定义”。

于 2017-07-22T11:17:15.760 回答