Javascript 年龄验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8112882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript age validation
提问by Joe_B
I'm currently doing javascript validation and everything's working perfectly except my age validation. If the person enters a value of type string it must give an alert for the user to enter his/her age as a numeric value...
我目前正在做 javascript 验证，除了我的年龄验证外，一切正常。如果此人输入字符串类型的值，它必须提醒用户输入他/她的年龄作为数值...
I'm not quite sure how to go about this so your help will be very much appreciated!
我不太确定如何解决这个问题，因此非常感谢您的帮助！
You will see what I'm trying to do in the validAge function in the if-statement: line 55
您将在 if 语句的 validAge 函数中看到我正在尝试执行的操作：第 55 行
Here is my code I have so far!
这是我到目前为止的代码！
<!DOCTYPE HTML>
<html>
<head>
<title>Question 1 / Vraag 1 - Basic JavaScript Validaton / Basiese JavaScript validasie
</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<script language="javascript">
function validate()
{
var firstname = document.getElementById("firstname");
var surname = document.getElementById("surname");
var age = document.getElementById("age");
var email = document.getElementById("email");
if(notEmpty(firstname, "ENTER USERNAME"))
{
if(notEmpty(surname, "ENTER SURNAME"))
{
if(notEmpty(age, "ENTER AGE"))
{
if(validAge(age, "AGE MUST BE A NUMERIC VALUE"))
{
if(notEmpty(email, "ENTER EMAIL"))
{
if(emailValid(email, "ENTER A PROPER EMAIL ADDRESS"))
{
return emailValid();
}
}
}
}
}
}
return false;
}
function notEmpty(elem, helperMsg)
{
if(elem.value.length == 0)
{
alert(helperMsg);
elem.focus();
return false;
}
return true;
}
function validAge(elem, helperMsg)
{
var age = elem.value;
if(age <= 0 || age > 100 || age.type == string???))
{
alert(helperMsg);
return false;
}
return true;
}
function emailValid(elem, helperMsg)
{
var atpos = elem.value.indexOf("@");
var dotpos = elem.value.lastIndexOf(".");
if(atpos < 0 || dotpos < 0)
{
alert(helperMsg);
return false;
}
return true;
}
</script>
</head>
<body>
<form method="get" action="">
<table>
<tr>
<td> Firstname:</td>
<td> <input type="text" name="firstname" id="firstname" /><span id="fnError">
</span></td>
</tr>
<tr>
<td> Surname:</td>
<td> <input type="text" name="surname" id="surname"/><span id="snError">
</span></td>
</tr>
<tr>
<td> Age:</td>
<td> <input type="text" name="age" id="age"/><span id="aError">
</span></td>
</tr>
<tr>
<td> Email:</td>
<td><input type="text" name="email" id="email"/><span id="eError">
</span></td>
</tr>
<tr><td colspan="2"><input type="button" value="Validate" onClick="validate()" /></td></tr>
</table>
</form>
</body>
</html>
回答by Rob W
Use a RegExp to check whether it's a valid age. Methods such as isNaNwill still allow floating-point numbers, though I have never heard anyone saying My age is twelve dot three.:
使用 RegExp 来检查它是否是一个有效的年龄。诸如此类的方法isNaN仍然允许使用浮点数，尽管我从未听过任何人说My age is twelve dot three.:
function validAge(elem, helperMsg)
{
var age = elem.value;
//Two digits, so anything between and including 0 and 99
if(/^\d{1,2}$/,test(age))
{
alert(helperMsg);
return false;
}
return true;
}
Another tip: Instead of nesting hundreds of if-conditions, you can also use the logical &&(AND) operator.
另一个提示：if您还可以使用逻辑&&(AND) 运算符，而不是嵌套数百个 - 条件。
if(a){
if(b){
if(c){
...
can be shortened to:
可以缩短为：
if(a && B && c){
回答by Peter Olson
I think this is what you want:
我想这就是你想要的：
if(isNaN(age) || age <= 0 || age > 100))
The isNaN(age)uses the isNaN[MDN]function to check whether or not ageis actually a number.
在isNaN(age)使用isNaN[MDN]函数来检查是否age实际上是数字。
Note that this will allow floating point ages, which may or may not be what you want. If you prefer, you can only allow integer ages with this condition:
请注意，这将允许浮点年龄，这可能是您想要的，也可能不是。如果您愿意，您只能在此条件下允许整数年龄：
age % 1 === 0
Also, I would avoid nesting all the ifstatements. You could do a return after each one, like this:
另外，我会避免嵌套所有if语句。你可以在每一个之后做一个返回，像这样：
if(notEmpty(firstname, "ENTER USERNAME")) return false;
if(notEmpty(surname, "ENTER SURNAME")) return false;
if(notEmpty(age, "ENTER AGE")) return false;
/// skip a few ...
return emailValid();
BTW, there are some people who are over 100 years old. This app would be bad for their user experience.
顺便说一句，有些人已经超过 100 岁了。这个应用程序对他们的用户体验不利。
回答by p.campbell
回答by Exception
回答by lasantha
<html>
<head>
<title>Name</title>
<script>
function validatetext()
{
if(document.sign.fname.value=="")
{
alert("Missing First name!");
}
if(isNaN(document.sign.age())
{
alert("Enter numaric");
}
}
</script>
</head>
<body><form method=post name="sign">
<b>name:</b>
<input name="fname" type="text" size="30" maxlength="30" />
<br>
<b>age:</b>
<input name="age" type="text" size="30" maxlength="30" />
<input type="submit" name="signup" value="sign up" onclick="validatetext();" />
</form>
</body>
</html>
