在web开发中,会经常遇到需要提交表单(FORM)信息到后台进行处理,在这个表单上往往都会有需要用户填写纯数字的项目,例如在用户注册时候要求填写年龄、身高、手机号码、身份证号码等等。
一个比较好的web程序就是在前台(即在浏览器端)就可以对用户填写的这些信息做校验,如果有非数字存在,就停止提交,提示用户改正,这样比提交到后台(服务器端)校验更快捷,也会有更好的用户感受。
下面举一个JavaScript的通用代码作例子,详细介绍一下如何对这些纯数字域的项目进行前台校验。
源码如下:
//check if the string is only digit
function CheckDigit(objDigit, txtTitle)
{
var strDigit=objDigit.value;
if(isNaN(strDigit))
{
alert(txtTitle + "只能使用数字!");
objDigit.focus();
return false;
}
return true;
}
上面这段代码中,需要介绍一下的只不过是CheckDigit函数的两个参数。这两个参数搞清楚了,就可以直接拿过来用了。至于里面的实现有不懂的地方都好说,查一下JavaScript开发参考就行了。
第一个参数objDigit是指要校验的对象,比如用户填写的年龄信息是一个名字为age的文本框,而表单名字为form1,那么这个参数objDigit指的是window.document.form1.age。注意,这里的objDigit并非是指需要校验的“字符串”,不能传值window.document.form1.age.value。
第二个参数txtTitle是指校验对象的名称。这个是有用户自己定的,用于出现校验不通过时候显示提示信息的。还用刚才的例子,objDigit指window.document.form1.age时候,txtTitle应该为“年龄”。
下边给出这个例子的完整代码:
<html>
<head>
<title>JavaScript校验数字域的例子</title>
</head>
<script language="JavaScript">
//check if the string is only digit
function CheckDigit(objDigit,txtTitle)
{
var strDigit=objDigit.value;
if(isNaN(strDigit))
{
alert(txtTitle + "只能使用数字!");
objDigit.focus();
return false;
}
return true;
}
//Validate the form
function Validate(form)
{
var age = form.age;
if (! CheckDigit(age, "年龄")) return false;
var id = form.ID;
if (! CheckDigit(id, "身份证号码")) return false;
var mobile = form.moblie;
if (! CheckDigit(mobile, "手机号")) return false;
return true;
}
</script>
<body>
<form name=form1 method="post" onSubmit="return Validate(this);" action=register.jsp>
姓名:<input type="text" name="chinese_name" maxlength="10">
年龄:<input type="text" name="age" maxlength="5">
身份证:<input type="text" name="ID" maxlength="10">
手机:<input type="text" name="mobile" maxlength="10">
</form>
</body>
</html>
通过上面的例子,我们应该对数字类型的校验很有把握了。
然而,有一些特殊的信息,不仅仅需要判断它是否是纯数字,而且还需要进一步检验是否合乎规格。例如上面例子的身份证号码和手机号码,身份证号码要求是15位(老身份证)或18位(新身份证),手机号码要求是11位数字,且前面两位是13开头,因此专门为它们分别写两个校验的函数:
function CheckIDCard(objID)
{
var strID = objID.value;
if (strID.length != 15 && strID.length != 18)
{
alert("身份证号只能为 15 位或 18 位数字,请重新输入!");
objID.focus();
return false;
}
return true;
}
function isValidMobile(objMobile){
var mobile = objMobile.value;
if ((mobile.length != 11) || isNaN(mobile) || (mobile.substring(0, 2) != "13")) {
return false;
}
return true;
}
现在身份证号码和手机号的校验也搞定了,我们再回头看看关于“年龄”的校验。这个域虽然检查了填写的是否是纯数字,但这个并没有考虑是否是正数,因为负数和零这些值对年龄没有意义。下面的这个函数就用于判断正数的:
function CheckPositive(objDigit, txtTitle)
{
if(!CheckDigit(objDigit, txtTitle)) return false;
else
{
if(parseInt(objDigit.value)<0)
{
alert(txtTitle + "不能使用负数!");
objDigit.focus();
return false;
}
}
return true;
}
我们再仔细想想,这样的校验就算是比较完美了么?是不是还有一些纰漏呢?应该想到小数也不能描述年龄,没有人会向别人介绍说我今年22.5岁。正整数的校验函数如下:
function isInteger(s){
var i;
for (i = 0; i < s.length; i++){
var c = s.charAt(i);
if (((c < "0") || (c > "9"))) return false;
}
return true;
}
这下终于圆满了。呵呵。
使用正则表达式
1、如何校验数字型?
var re=/^/d{1,8}$|/./d{1,2}$/;
var str=document.form1.all(i).value;
var r=str.match(re);
if (r==null)
{
sign=-4;
break;
}
else{
document.form1.all(i).value=parseFloat(str);
}