编辑:我最初建议使用 parseInt 和 isNaN() 来测试输入是否为非数字。好吧,似乎使用正则表达式不仅可以正确格式化像“4a”这样的案例,而且在许多情况下它实际上更快(惊喜!)。
我用一个按钮模拟了一些 HTML 来说明。
HTML:
<form>
<label for="userAge">Age:</label>
<input type="text" name="userAge" id="userAge" />
<input type="button" id="test" name="test" value="Test" />
</form>
JavaScript:
function validateForm() {
// get the input value once and use a variable
// this makes the rest of the code more readable
// and has a small performance benefit in retrieving
// the input value once
var userAge = document.forms[0].userAge.value;
// is it blank?
if (userAge === "") {
alert("Age field cannot be empty.")
return false;
}
// is it a valid number? testing for positive integers
if (!userAge.match(/^\d+$/)) {
alert("Your age input is not correct.")
return false;
}
// you could also test parseInt(userAge, 10) < 5
if (userAge < 5) {
alert("Your age input is not correct.")
return false;
}
alert("Name and Age are valid.");
return true;
}
// trigger validateForm() however you want, I did this as an example
document.getElementById("test").onclick = validateForm;
这里有一个 jsFiddle 来演示:http: //jsfiddle.net/willslab/m2spX/6/
关于正则表达式:如果 userAge 仅包含正整数,则 userAge.match(/^\d+$/) 返回 true。开头 / 和结尾 / 表示正则表达式文字。\d 仅表示 ASCII 数字。+ 匹配前一个模式的一次或多次出现(在这种情况下为数字)。^ 表示从头开始匹配,$ 表示匹配到结束。所以 /^\d+$/ 是一个正则表达式文字,从头到尾只匹配 ASCII 数字!
另请注意,您可以使用 OR 运算符 (||) 组合最后两个 if 语句。如果你想给每个人一个唯一的验证信息,我把这些隔离了。
它看起来像这样:
if (!userAge.match(/^\d+$/) || userAge < 5) {
alert("Your age input is not correct.")
return false;
}
随意询问有关代码的任何问题,我会解释。我希望这会有所帮助!