用Javascript校验客户端数据.....不错的文章,转载!
[@more@]时间: 2006-06-22 来自: | ||||||||||||
作者: 雨亦奇 也许你要问,在javascript中,利用form.textfield.value.length就可以得到form表单的textfield文本框中输入数据的长度了,难道这个长度不是以字节计的吗? 在详细说明之前,读者不妨先测试如下网页: content="text/html; charset=gb2312"> 测试的结果如下: 怎么样?“china中国”的长度是7,而不是9(按字节算的话,它的长度应该是9)。为什么会这样?答案是这个长度是以Unicode字符计的长度,一个英文字母是一个Unicode字符,一个汉字也是一个Unicode字符。 实际上我们经常用的并不是这个长度,而是以字节为单位计算的长度。在B/S开发中,我们所用的后台数据库,其字段宽度就是以节字计算的。以字节为单位时,一个英文字母是一个字节,而一个汉字则是两个字节了,二者长度不一样。 由于数据校验不宜在数据库服务器端进行(这样做效率很低),所以在客户端(浏览器端)进行数据校验时,就必须以字节为单位,以避免输入的数据超出字段宽度。为此,必须能获取输入数据的准确的字节长度。 笔者经过一番研究,写了如下javascript函数: function strlen(str) 在这个javascript脚本中,strlen函数逐个取str字符串中的Unicode字符,利用charCodeAt获取指定位置的字符的值(为数字形式,可和数字进行比较),因为英文字符的值总在0到255之间,所以我们可以认定,如果该值大于255,就表示是汉字,长度加2,否则长度加1,这样最终可得到这个字符串以字节计的长度,满足了我们的要求。 下面是将原取字符串长度的函数strlen替换为新的strlen后的结果: 二、客户端数据校验的通用解决之道----妙用自定义属性 我们知道,HTML的文本框元素可以使用type,name,value,size,maxlength,style,id等固有属性,但你可曾想到,我们还可以自定义一些属性呢。笔者是在一个极其偶然的机会里发现这个小秘密的,并且没有想到的是,这个小秘密竟然可以帮我们很大的忙----实现客户端数据的通用校验,自此客户端校验工作容易做了,不用再为每个FORM表单劳神又费力地写javascript校验代码了。 请看下面的测试网页univerify_test.html: onsubmit="return verifyAll(form1);"> 姓名: | size="10" maxlength="10" maxsize="10" nullable="no" | datatype="text" onBlur="verifyInput(this);"> * 年龄: | size="3" maxlength="3" maxsize="3" nullable="no" | datatype="number" onBlur="verifyInput(this);"> * 住址: | size="40" maxlength="100" maxsize="100" nullable="yes" | datatype="text" onBlur="verifyInput(this);"> name="Button" value="检测全部输入并提交" > | |
1、chname:表示该数据的中文名称,用于校验出错时显示用。
2、maxsize:表示允许输入的最大长度,这个长度是以节字计算的。
3、nullable:表示输入值是否允许为空。为yes时允许为空。
4、datatype:表示输入值的数据类型。这个数据类型用户可以根据需要自行定义,需要注意的是,对于每一个新的数据类型,均需要在下面将要讲述的javascript文件univerify.js中添加相应的校验函数,从而实现统一校验。
三个文本框都对失去焦点事件进行捕获:onBlur="verifyInput(this);"。在失去焦点时用verifyInput校验一下此文本框的值是否合法。
form1表单对onsubmit事件进行了捕获:onsubmit="return verifyAll(this);"。在用户提交表单时,用verifyAll对此表单的元素的值统一进行检测,验证其合法性,保证存入数据库时不出现异常。
上述网页引用的javascript函数库univerify.js内容如下:
/******************************************************/
/* 文件名:univerify.js */
/* 功 能:基于自定义属性的统一检测用javascript函数库 */
/* 作 者:纵横软件制作中心雨亦奇(zhsoft88@sohu.com) */
/******************************************************/
/* 取得字符串的字节长度 */
function strlen(str)
{var i;
var len;
len = 0;
for (i=0;i
if (str.charCodeAt(i)>255) len+=2; else len++;
}
return len;
}
/* 检测字符串是否为空 */
function isnull(str)
{
var i;
for (i=0;i
if (str.charAt(i)!=' ') return false;
}
return true;
}
/* 检测字符串是否全为数字 */
function isnumber(str)
{
var number_chars = "1234567890";
var i;
for (i=0;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)
{
image = document.getElementById("img_"+input.name);
image.src="img/warning.gif";
return false;
}
else
{
image = document.getElementById("img_"+input.name);
image.src="http://blog.itpub.net/63654/viewspace-900126/img/space.gif";
return true;
}
}
/* 检测指定FORM表单所有应被检测的元素
(那些具有自定义属性的元素)是否合法,此函数用于表单的onsubmit事件 */
function verifyAll(myform)
{
var i;
for (i=0;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需要检测,用户可在此函数中添加,可扩充性好。
下面是浏览univerify_test.html网页的画面:
使用基于自定义属性的客户端统一检测方法,需要做的工作很简单:
1、在网页文件中嵌入统一检测用javascript函数库:
2、对所用表单添加onsubmit事件处理程序:onsubmit="return verifyAll(this);"。其中的this指定为当前表单对象,勿需提供表单具体名字,极具通用性。
3、对每个需要检测的文本框添加chname,maxsize,nullable和datatype四个自定义属性。如果想在文本框失去焦点时对数据进行一下校验,请添加事件处理程序:onBlur="verifyInput(this);"。
怎么样?使用基于自定义属性的客户端统一检测方法后,不用再为每个表单写类似的检测代码了吧,统一检测足够了。
小结:自定义属性是非常有用的属性,基于自定义属性的客户端数据统一检测方法,在B/S开发中极其有用,使用方便,可扩充性强。相信读者经过实践,自能体会到个中妙处。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。