Question

我正在处理一个网页表单，该表单一旦提交就应该通过一些验证规则。我现在遇到麻烦的规则是年龄只应该是一个数字，例如（24岁就好了，但24岁应该给出错误）。

现在我试图让它只接受数字内容并且没有空格。

我还有一个名字字段，它不应该允许空格并使用语句

if(!(/^\S{3,}$/.test(fName))) {
    errMsgHolder.innerHTML = "Name cannot contain spaces";
    return false;
}

检查空格，这是否正常工作（我将在最后发布完整的代码）。所以我认为我可以用checkAge（）函数做类似的事情，但我无法让它工作。无论我是否在年龄字段中输入任何内容，表单始终都会提交。但是，如果我将名称字段留空或输入无效输入，我会给出正确的错误。

这是我的代码：

<html>
    <head>
        <title>Project 5</title>
    </head>

    <body>
        <form name="myForm" id="myForm" onsubmit="return validateForm()">
            First Name: <input type="text" id="name"> <br>
            <span id="nameErrMsg" class="error"></span> <br />
            Age: <input type="text" id="age"> <br>
            <span id="ageErrMsg" class="error"></span> <br />
            Street Address: <input type="text" id="address"> <br>
            State: <select>
                <option value="la">LA</option>
                <option value="tx">TX</option>
                <option value="ok">OK</option>
                <option value="mi">MI</option>
                <option value="az">AZ</option>
            </select> <br>
            Login Password: <input type="password" id="password"> <br>
            <input type="submit" value="Submit"> <br>
        </form>

        <script type="text/javascript">
            function validateForm() {
                return checkName() && checkAge();
            }

            function checkName() {
                var form = document.myForm;
                var fName = form.name.value;
                var errMsgHolder = document.getElementById("nameErrMsg");
                if(fName.length < 3) {
                    errMsgHolder.innerHTML = "Please enter a name with at least three letters";
                    return false;
                }
                else if(!(/^\S{3,}$/.test(fName))) {
                    errMsgHolder.innerHTML = "Name cannot contain spaces";
                    return false;
                }
                else {
                    errMsgHolder.innerHTML = " ";
                    return undefined; 
                }
            }

            function checkAge() {
                var form1 = document.myForm;
                var personAge = form1.age.value;
                var ageErr = document.getElementById("ageErrMsg");
                if(/\D/.test(personAge)) {
                    ageErr.innerHTML = " ";
                    return undefined;
                }
                else if(!(/\D/.test(personAge))) {
                    ageErr.innerHTML = "Please enter a numeric age";
                    return false;
                }
                else if(personAge.length < 1) {
                    ageErr.innerHTML = "Please enter your age";
                    return false;
                }
                else if(!(/^\S{3,}$/.test(personAge))) {
                    ageErr.innerHTML = "Age cannot contain spaces";
                    return false;
                }   
            }
        </script>

    </body>
</html>

此外，正如我所写的那样，当我在浏览器上查看Web控制台时，我没有收到任何错误。谁能发现为什么这个没有正常工作和/或有另一种方法在checkAge（）函数上完成相同的任务？

已更新为工作代码 谢谢你的帮助。我现在想发布它正常工作的代码，因为我碰到了以前从未遇到过的东西，希望这可以帮助其他有同样问题的人。

即使在实现了接受的答案之后，我也收到了正确的错误消息，但前提是我只是从validateForm（）函数中调用了一个函数。我最终将这些函数调用分配给变量并从该函数返回变量并且完美地工作。

所以这是最终的工作代码：

<html>
    <head>
        <title>Project 5</title>
    </head>

    <body>
        <form name="myForm" id="myForm" onsubmit="return validateForm()">
            First Name: <input type="text" id="name"> <br>
            <span id="nameErrMsg" class="error"></span> <br />
            Age: <input type="text" id="age"> <br>
            <span id="ageErrMsg" class="error"></span> <br />
            Street Address: <input type="text" id="address"> <br>
            State: <select>
                <option value="la">LA</option>
                <option value="tx">TX</option>
                <option value="ok">OK</option>
                <option value="mi">MI</option>
                <option value="az">AZ</option>
            </select> <br>
            Login Password: <input type="password" id="password"> <br>
            <input type="submit" value="Submit"> <br>
        </form>

        <script type="text/javascript">
            function validateForm() {
                var ckName = checkName();
                var ckAge = checkAge();

                return ckName && ckAge;
            }

            function checkName() {
                var form = document.myForm;
                var fName = form.name.value;
                var errMsgHolder = document.getElementById("nameErrMsg");
                if(fName.length < 3) {
                    errMsgHolder.innerHTML = "Please enter a name with at least three letters";
                    return false;
                }
                else if(!(/^\S{3,}$/.test(fName))) {
                    errMsgHolder.innerHTML = "Name cannot contain spaces";
                    return false;
                }
                else {
                    errMsgHolder.innerHTML = " ";
                    return undefined; 
                }
            }

            function checkAge() {
                var form1 = document.myForm;
                var personAge = form1.age.value;
                var ageErr = document.getElementById("ageErrMsg");
                if(personAge === "") {
                    ageErr.innerHTML = "Please enter your age";
                    return false;
                }
                else if(/\D/.test(personAge)) {
                    ageErr.innerHTML = "Please enter a numeric age";
                    return false
                }
                else {
                    ageErr.innerHTML = " ";
                    return undefined;
                }
            }
        </script>

    </body>
</html>

再次感谢您的帮助！

Answer 1

您可以使用单个正则表达式执行所有这些检查：

^\d+$

这确保条目具有一个或多个数字（\ d是字符类[0-9]，+是“一个或多个”，^匹配字符串的开头，$匹配字符串的结尾。

Answer 2

这里的问题是，当字段留空时，年龄正则表达式正在传递，因为空字符串不包含任何非法字符。因此，在通过正则表达式检查程序之前，您需要检查空字符串。

以下代码段应该可以解决您的问题：

if(personAge === "")
{
    ageErr.innerHTML = "Please enter your age";
    return false;
}
else if(/\D/.test(personAge))
{
    ageErr.innerHTML = "Please enter a numeric age";
    return false;
}
else
{
    ageErr.innerHTML = "";
    return undefined;
}

表格未正确验证

2 个答案: