二、客户端数据校验的通用解决之道----妙用自定义属性
我们知道，HTML的文本框元素可以使用type,name,value,size,maxlength,style,id等固有属性，但你可曾想到，我们还可以自定义一些属性呢。笔者是在一个极其偶然的机会里发现这个小秘密的，并且没有想到的是，这个小秘密竟然可以帮我们很大的忙----实现客户端数据的通用校验，自此客户端校验工作容易做了，不用再为每个FORM表单劳神又费力地写Javascript校验代码了。
请看下面的测试网页univerify_test.html：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>基于自定义属性的客户端统一检测方法</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<script language="javascript" src="univerify.js"></script>
<body>
<br>
<br>
<center>基于自定义属性的客户端统一检测方法</center>
<form name="form1" method="post" action=""
onsubmit="return verifyAll(form1);">
<center>
<TABLE align="center" border="1" borderColor="#aaeeff"
cellPadding="1" cellSpacing="0" width="580">
<tr>
<td><img id=img_NAME src="img/space.gif"></td>
<td>姓名:</td>
<td><input type="text" name="NAME" chname="姓名"
size="10" maxlength="10" maxsize="10" nullable="no"
datatype="text" onBlur="verifyInput(this);">
<font color="red">*</font></td>
</tr>
<td><img id=img_AGE src="img/space.gif"></td>
<td>年龄：</td>
<td><input type="text" name="AGE" chname="年龄"
size="3" maxlength="3" maxsize="3" nullable="no"
datatype="number" onBlur="verifyInput(this);">
<font color="red">*</font></td>
<tr>
<td><img id=img_ADDRESS src="img/space.gif"></td>
<td>住址：</td>
<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)。笔者为这三个文本框中自行定义了四个新属性，分别是:
1、chname：表示该数据的中文名称，用于校验出错时显示用。
2、maxsize：表示允许输入的最大长度，这个长度是以节字计算的。
3、nullable：表示输入值是否允许为空。为yes时允许为空。
4、datatype：表示输入值的数据类型。这个数据类型用户可以根据需要自行定义，需要注意的是，对于每一个新的数据类型，均需要在下面将要讲述的Javascript文件univerify.js中添加相应的校验函数，从而实现统一校验。
三个文本框都对失去焦点事件进行捕获：onBlur="verifyInput(this);"。在失去焦点时用verifyInput校验一下此文本框的值是否合法。
form1表单对onsubmit事件进行了捕获：onsubmit="return verifyAll(this);"。在用户提交表单时，用verifyAll对此表单的元素的值统一进行检测，验证其合法性，保证存入数据库时不出现异常。
|
