Question

我想要的是当两个字段fname和lname保持为空时，弹出窗口应显示两条消息，即“必须填写名字”，“姓氏必须填写“。

我需要做哪些修改？

<!DOCTYPE html>
<html>
<head>
    <script>
        function validateForm() {
            var x = document.forms["myForm"]["fname"].value;
            if (x == null || x == "") {
                alert("First name must be filled out");
                document.myForm.fname.focus();
                return false;
            }

            var y = document.forms["myForm"]["lname"].value;
            if (y == null || y == "") {
                alert("Last name must be filled out");
                document.myForm.lname.focus();
                return false;
            }
        }
    </script>
</head>
<body>

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">First name:
    <input type="text" name="fname">Last name:
    <input type="text" name="lname">
    <input type="submit" value="Submit">
</form>

</body>

Answer 1

也许这会给你一些关于如何继续的想法：

function validateForm() {
    var errors = [],
        fname = document.forms["myForm"]["fname"],
        lname = document.forms["myForm"]["lname"];

    if (lname.value == "") {
        errors.unshift("Last name must be filled out");
        lname.focus();
    }
    if (fname.value == "") {
        errors.unshift("First name must be filled out");
        fname.focus();
    }
    if (errors.length > 0) {
        alert("Cannot submit\n" + errors.join("\n"));
        return false;
    }
}

演示：http://jsfiddle.net/MKdg5/

你会注意到的第一件事是它更易于阅读，因为块是缩进的。也：

您目前使用document.forms["myForm"]["fname"]和document.myForm.fname访问同一字段。选择一种方法并一致地使用它，或
创建引用字段fname的变量，然后使用fname.value和fname.focus()
不要费心对null进行测试，因为.value属性永远都不会。
不是立即警告错误并返回，而是将错误文本添加到数组中，然后在结束时测试数组是否为空。

Answer 2

尝试将您的字段验证为：

if (!x || x.length == 0)

Answer 3

你可以使用Hthml 5 required。它简单而又整洁。

<form>
First name: <input type="text" name="fname" required="required">
Last name: <input type="text" name="lname" required="required">
<input type="submit" value="Submit">
</form>

Demo

注意： Internet Explorer 10，Firefox，Opera和Chrome支持required属性。但在Internet Explorer 9及更早版本或Safari中不支持它。

Answer 4

使用您的validateForm函数，您的代码永远不会检查第二个字段。使用return语句时，该函数将停止执行，并返回指定的值。解决方案是使用嵌套的if语句并检查一个条件块中的两个字段

if (x==null || x=="")
{
    if (y==null || y=="")
    {
    //codes for both are not validated
    }
    else
    {
    //codes for just x is not validated
    }
}
else
    if (y==null || y=="")
    {
    //codes for y is not validated
    }
    else
    {
    //codes for all validated
    }

这样在每个块中使用return语句不会破坏你的函数执行

如何进行输入

4 个答案: