使用 Javascript 进行表单验证 - 字段值必须介于 2 个特定数字之间答案

【问题标题】：Form validation with Javascript - Field value must be between 2 specific numbers使用 Javascript 进行表单验证 - 字段值必须介于 2 个特定数字之间
【发布时间】：2013-03-10 15:02:06
【问题描述】：

我在页面上有一个表单。在表单上有一个名为 Birthyear 的字段。我需要在javascript中弄清楚以下内容：

当在字段中输入 1900-2012 之间的值时，表格被接受。如果值不在 1900-2012 之间，则生日文本框背景颜色变为黄色。

有谁知道如何做到这一点？

我的 HTML 如下：

</head><body>

<div id="div1">
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
Username:   <input type="text" id="username" name="username"><br>         
Birth Year: <input type="text" id="birthYear" name="birthYear"><br><br>
<input type="submit"  value="Submit">
</form>

</div>

<div id="div2">
<img src="cat.jpg"    id="im1" name="image1"/>
<img src="dog.jpg"    id="im2" name="image2"/>
<img src="fish.jpg"   id="im3" name="image3" class='double'/>
</div>


</body></html>

我的JS如下：

document.getElementById("username").focus();
function validateForm(){
var x=document.forms["myForm"]["username"].value;

if (x==""){
alert("Username Required!");
document.getElementById("username").focus();
}


var dob = document.forms["myForm"]["birthYear"];
var y = dob.value;


if(isNaN(dob)){
    alert('must be a number');
    dob.select();
    return false;

}

}

【问题讨论】：

使用parseInt(y)获取年份的值，然后检查它是否在1900到2012之间。
顺便说一句，你搞错了，它是 isNaN(y) 而不是 dob。 Dob 是 dom 元素。

标签： javascript forms numbers background-color

【解决方案1】：

function validateForm(){
var x=document.forms["myForm"]["username"].value;

if (x==""){
alert("Username Required!");
document.getElementById("username").focus();
}


var dob = document.forms["myForm"]["birthYear"];
var y = dob.value;

if(!isNaN(y)){

if(y>=1900 && y<=2012) {
    //Correct
 } else {
     //Wrong
     document.getElementById("birthYear").style.background= "yellow";
     document.getElementById("birthYear").focus();
     return false;
 }
} else {
  alert('must be a number');
}
}

【讨论】：

你应该将 if else 移动到 isNaN if 之外，因为如果用户输入任何数值，则不会进行额外检查。
您好，非常感谢您的帮助。该代码是有道理的，但由于某种原因它仍然不起作用。知道为什么吗？
@user2147761 抱歉，我忘记添加非运算符“！”在 isNaN() 条件下。现在这个例子有效。感谢您指出。