Question

为什么这段代码会在填写所有字段时填写所有值？它应该只在实际为空时给出“填写所有字段”消息。

<html>
<head>
<title>javascript</title>
</head>
<body>
<h1>test page</h1>
<hr>
<script type="text/javascript">
function checkForm(form) {
    for(var i = 0; i<form.elements.length; i++) {
        if(form.elements[i].value == "") {
            alert("Please fill out all fields.");
            return false;
        }
    }
    return true;
}
</script>

<form onSubmit="return checkForm(this)">
<input type="text" name="firstName"><br>
<input type="text" name="lastName">
<input type="submit">
</form>
</body>
</html>

Answer 1

提交按钮是一个表单元素，您没有给它一个值。因此，JS循环输入，进入提交按钮，找不到任何值，并提高警报。

尝试：

function checkForm(form) {
    for(var i = 0; i<form.elements.length; i++) {
        if(form.elements[i].type == "input" && form.elements[i].value == "") {
            alert("Please fill out all fields.");
            return false;
        }
    }
    return true;
}

Answer 2

这是因为您的代码检查每个输入字段，在这种情况下也是提交按钮。将您的功能更改为：

function checkForm(form) {
    for (var i = 0; i < form.elements.length; i++) {
        if (form.elements[i].value == "" && form.elements[i].type != 'submit') {
            alert("Fill out ALL fields.");
            return false;
        }
    }
    return true;
}

Answer 3

您还要检查以确保填写了提交按钮。试试这个：

function checkForm(form) {
    var win = true;
    elements = form.elements;
    for(var i = 0; i<elements.length; i++) {
        if( elements[i].value == "" &&  elements[i].type != "submit") {
            win = false;
        }
     }
     if(!win){
         alert("please fill out ALL fields!");

     }   
     return win;
}

验证表单字段

3 个答案: