表单未正确验证

Form Not Validating Correctly

本文关键字：验证 表单      更新时间：2023-09-26

我正在处理一个web表单，该表单应该在提交后通过一些验证规则。例如，我现在遇到的问题是，年龄只应该是一个数字（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>

此外，正如本文所写的，当我在浏览器上查看网络控制台时，我没有收到任何错误。有人能发现为什么这不能正常工作吗？和/或有其他方法来完成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>

再次感谢您的帮助！

您可以用一个正则表达式完成所有这些检查：

^'d+$

这样可以确保条目有一个或多个数字（''d是字符类[0-9]，+是"一个或更多"，^与字符串的开头匹配，$与字符串的结尾匹配。

您的问题是，当字段为空时，由于空字符串不包含任何非法字符，因此会传递person-age regex。因此，在通过正则表达式检查器之前，您需要检查一个空字符串。

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

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;
}
相关文章：