正在阅读:如何用Javascript校验客户端数据如何用Javascript校验客户端数据

2009-03-12 23:34 出处:中国计算机报 作者:雨亦奇 责任编辑:huangpeidan
上述网页引用的Javascript函数库univerify.js内容如下:

/******************************************************/
/* 文件名:univerify.js                               */
/* 功  能:基于自定义属性的统一检测用Javascript函数库 */
/* 作  者:纵横软件制作中心雨亦奇(zhsoft88@sohu.com)  */
/******************************************************/
/* 取得字符串的字节长度 */
function strlen(str)
{var i;
var len;
len = 0;
for (i=0;i<str.length;i++)
{
if (str.charCodeAt(i)>255) len+=2; else len++;
}
return len;
}
/* 检测字符串是否为空 */
function isnull(str)
{
var i;
for (i=0;i<str.length;i++)
{
if (str.charAt(i)!=' ') return false;
}
return true;
}
/* 检测字符串是否全为数字 */
function isnumber(str)
{
var number_chars = "1234567890";
var i;
for (i=0;i<str.length;i++)
{
if (number_chars.indexOf(str.charAt(i))==-1) return false;
}
return true;
}
/* 检测指定文本框输入是否合法 */
function verifyInput(input)
{
var image;
var i;
var error = false;
/* 长度校验 */
if (strlen(input.value)>parseInt(input.maxsize))
{
alert(input.chname+"超出最大长度"+input.maxsize);
error = true;
}
else
/* 非空校验 */
if (input.nullable=="no"&&isnull(input.value))
{
alert(input.chname+"不能为空");
error = true;
}
else
{
/* 数据类型校验 */
switch(input.datatype)
{
case "number": if (isnumber(input.value)==false)
{
alert(input.chname+"值应该全为数字");
error = true;
}
break;
/* 在这里可以添加多个自定义数据类型的校验判断 */
/*  case datatype1: ... ; break;        */
/*  case datatype2: ... ; break;        */
/*  ....................................*/
default  : break;
}
}
/* 根据有无错误设置或取消警示标志 */
if (error)
{
imge = document.getElementById("img_"+input.name);
image.src="img/warning.gif";
return false;
}
else
{
image = document.getElementById("img_"+input.name);
image.src="img/space.gif";
return true;
}
}
/* 检测指定FORM表单所有应被检测的元素
(那些具有自定义属性的元素)是否合法,此函数用于表单的onsubmit事件 */
function verifyAll(myform)
{
var i;
for (i=0;i<myform.elements.length;i++)
{
/* 非自定义属性的元素不予理睬 */
if (myform.elements[i].chname+""=="undefined") continue;
/* 校验当前元素 */
if (verifyInput(myform.elements[i])==false)
{
myform.elements[i].focus();
return false;
}
}
return true;
}


  在univerify.js中,verifyAll用来校验指定表单的数据,它是逐个提取表单中的元素的,不用特别指定表单元素的名字,所以具有通用性。verifyInput是用来实际执行数据校验的函数,如果有新的数据类型datatype需要检测,用户可在此函数中添加,可扩充性好。

  使用基于自定义属性的客户端统一检测方法,需要做的工作很简单:

  1、在网页文件中嵌入统一检测用Javascript函数库:<script language="javascript" src="univerify.js"></script>

  2、对所用表单添加onsubmit事件处理程序:onsubmit="return verifyAll(this);"。其中的this指定为当前表单对象,勿需提供表单具体名字,极具通用性。

  3、对每个需要检测的文本框添加chname,maxsize,nullable和datatype四个自定义属性。如果想在文本框失去焦点时对数据进行一下校验,请添加事件处理程序:onBlur="verifyInput(this);"。

  怎么样?使用基于自定义属性的客户端统一检测方法后,不用再为每个表单写类似的检测代码了吧,统一检测足够了。

  小结:自定义属性是非常有用的属性,基于自定义属性的客户端数据统一检测方法,在B/S开发中极其有用,使用方便,可扩充性强。相信读者经过实践,自能体会到个中妙处。
键盘也能翻页,试试“← →”键

关注我们

最新资讯离线随时看 聊天吐槽赢奖品