Fatal编程技术网

Javascript 表单验证不正确

javascript forms validation

Javascript 表单验证不正确,javascript,forms,validation,Javascript,Forms,Validation,我正在开发一个web表单，它应该在提交后通过一些验证规则。我现在遇到的问题是年龄只应该是一个数字，例如（24岁可以，但24岁应该给出一个错误） 现在我正试图让它只接受数字内容，没有空格 我还有一个名字字段，不允许使用空格，并使用了该语句 if(!(/^\S{3,}$/.test(fName))) { errMsgHolder.innerHTML = "Name cannot contain spaces"; return false; } 检查空白，这工作正常（我将在最后发布完

我正在开发一个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>


项目5
名字：



年龄：



街道地址：

声明：
洛杉矶
德克萨斯州
好啊
医疗保险
阿兹


登录密码：



函数validateForm（）{
返回checkName（）&&checkAge（）；
}
函数checkName（）{
var form=document.myForm；
var fName=form.name.value；
var errMsgHolder=document.getElementById（“nameermsg”）；
如果（fName.length<3）{
errMsgHolder.innerHTML=“请输入至少包含三个字母的名称”；
返回false；
}
else if（！（/^\S{3，}$/.test（fName）））{
errMsgHolder.innerHTML=“名称不能包含空格”；
返回false；
}
否则{
errMsgHolder.innerHTML=“”；
返回未定义；
}
}
函数检查（）{
var form1=document.myForm；
var personAge=form1.age.value；
var ageErr=document.getElementById（“ageErrMsg”）；
如果（/\D/.test（人物））{
ageErr.innerHTML=“”；
返回未定义；
}
否则如果（！（/\D/.test（人物）））{
ageErr.innerHTML=“请输入数字年龄”；
返回false；
}
else if（人物长度<1）{
ageErr.innerHTML=“请输入您的年龄”；
返回false；
}
else if（！（/^\S{3，}$/.test（人物）））{
ageErr.innerHTML=“年龄不能包含空格”；
返回false；
}   
}
此外，正如本文所述，当我在浏览器上查看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>


项目5
名字：



年龄：



街道地址：

声明：
洛杉矶
德克萨斯州
好啊
医疗保险
阿兹


登录密码：



函数validateForm（）{
var ckName=checkName（）；
var ckAge=checkAge（）；
返回ckName&&ckAge；
}
函数checkName（）{
var form=document.myForm；
var fName=form.name.value；
var errMsgHolder=document.getElementById（“nameermsg”）；
如果（fName.length<3）{
errMsgHolder.innerHTML=“请输入至少包含三个字母的名称”；
返回false；
}
else if（！（/^\S{3，}$/.test（fName）））{
errMsgHolder.innerHTML=“名称不能包含空格”；
返回false；
}
否则{
errMsgHolder.innerHTML=“”；
返回未定义；
}
}
函数检查（）{
var form1=document.myForm；
var personAge=form1.age.value；
var ageErr=document.getElementById（“ageErrMsg”）；
如果（人物==“”）{
ageErr.innerHTML=“请输入您的年龄”；
返回false；
}
否则如果（/\D/.test（人物））{
ageErr.innerHTML=“请输入数字年龄”；
返回错误
}
否则{
ageErr.innerHTML=“”；
返回未定义；
}
}
再次感谢你的帮助

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

^\d+$
这将确保条目有一个或多个数字（\d是字符类[0-9]，+是“一个或多个”，^匹配字符串a的开头 
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;
}