使用 Javascript 进行表单验证 - 字段值必须介于 2 个特定数字之间
Posted
技术标签:
【中文标题】使用 Javascript 进行表单验证 - 字段值必须介于 2 个特定数字之间【英文标题】：Form validation with Javascript - Field value must be between 2 specific numbers 【发布时间】：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 元素。
【参考方案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() 条件下。现在这个例子有效。感谢您指出。以上是关于使用 Javascript 进行表单验证 - 字段值必须介于 2 个特定数字之间的主要内容，如果未能解决你的问题，请参考以下文章
高级表单验证 - 如何在用户完成后在字段旁边添加复选标记？ --Javascript [关闭]