您现在正在浏览：站长之家 >> 设计编程 >> 详细内容

用Javascript校验客户端数据

时间:2007-10-22 来源:不详作者:林子

<td><input type="text" name="ADDRESS" chname="住址"
size="40" maxlength="100" maxsize="100" nullable="yes"
datatype="text" onBlur="verifyInput(this);"></td>
</tr>
<tr height=48px>
<td colspan=3 align=center><input type="submit"
name="Button" value="检测全部输入并提交" ></td>
</tr>
</table>
</center>
</form>
</html>
织梦内容管理系统

上述网页的表单form1中有三个文本框，姓名(NAME)、年龄(AGE)和住址(ADDRESS)。笔者为这三个文本框中自行定义了四个新属性，分别是: copyright dedecms

1、chname：表示该数据的中文名称，用于校验出错时显示用。

内容来自dedecms

2、maxsize：表示允许输入的最大长度，这个长度是以节字计算的。

内容来自dedecms

3、nullable：表示输入值是否允许为空。为yes时允许为空。本文来自织梦

4、datatype：表示输入值的数据类型。这个数据类型用户可以根据需要自行定义，需要注意的是，对于每一个新的数据类型，均需要在下面将要讲述的javascript文件univerify.js中添加相应的校验函数，从而实现统一校验。

dedecms.com

三个文本框都对失去焦点事件进行捕获：onBlur="verifyInput(this);"。在失去焦点时用verifyInput校验一下此文本框的值是否合法。 copyright dedecms

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<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;
}