2006-11-07

[原创]使用面向对象的方式实现一个可扩展，低侵入性的javascript验证框架

关键字: javascript ajax
问题描述

　　一直以来项目中都是使用阿赖的验证框架来完成项目中的页面验证功能（http://www.onlinedown.net/soft/27816.htm)，要验证某个元素通常需要在HTML元素中添加一些自定义的属性，示例如下： 
<input type=text maxlength=20 size="34" name="chart.code" value='<ww:property value="chart.code" />'  dataType="Require" msg="图号必须填写!">


　　dataType和msg就是自定义的属性，这些属性会造成在一些页面编辑软件中无法识别，而且会让美工感到费解。

　　后来看到淘宝网的注册页面（http://member1.taobao.com/member/register.jhtml?f=top),包括javaeye的注册页面，感觉这种表现方式的用户体验是挺不错的，
因此研究了一下他们的代码，javaeye要给一个元素添加验证的示例代码如下： 
<TD align=left><INPUT class=input_default id=user_name name=user[name]><SPAN  style="COLOR: gray">全站唯一 2-50个字符</SPAN> </TD></TR>


　　如上两种方式都让HTML页面非常庞大和混乱。

　　是不是能够让页面更加清晰，便于开发人员和美工的分工协作呢？比如开发人员只需要在页面中指定元素，类似如下： 
<input type="text" name="code" value=""/>


至于验证规则如何，如何表现都通过javascript的DOM模型进行后期修改，这样的话页面是非常清洁的。

具体实现
使用OO的设计理念，参考JAVA的一些验证实现，决定基于javascript实现一个验证框架，类结构图如附件：


　　　Validation接口表示一个验证规则，比如必须验证，密码验证，每个Validation包括元素id,提示消息，错误消息，是否必须以及其他可选参数，对于密码验证可以在可选参数里提供需要匹配的密码元素ID。

　　　Validator接口表示一种验证方式，保存所有的验证规则，负责页面表现逻辑。其addValidation方法用来添加一个特定的验证规则。

　　　要使用这个类库的步骤包括：
填充表单页面
指定验证规则
执行验证

表单页面： 

			<tr>
				<td>
					用户
				</td>
				<td>
					<input type="text" id="name" name="name" size="30" />
				</td>
			</tr>
			<tr>
				<td>
					密码
				</td>
				<td>
					<input type="text" id="password" name="password" size="30" />
				</td>
			</tr>

指定验证规则: 

 var validator = new EmapValidator();
			validator.addValidation(new RequiredValidation("name","用户名称","必须提供用户名称!"));
			validator.addValidation(new MatchedValidation("secondPassword","密码","密码必须相同","password"));
			validator.addValidation(new EmailValidation("email","邮件地址","邮箱格式不正确"));


执行验证 

validator.validate();


需要注意的是，应该把validator实例作为全局变量，应该在onload方法中指定验证规则和执行验证，这两步实际上会添加通过DOM操作给元素加一些事件处理。

结语
　　具体的代码可以参见附件中的代码示例，示例是一个Eclise工程，发布后应该可以直接使用。从这些代码中可以看到我们的HTML页面是非常清爽的，所有的验证逻辑都集中在一起，而且要增加一个新的验证规则，只需要实现一个Validation类即可，如果要实现一种新的验证结果表现方式，只需要实现一个Validator子类即可，目前EmapValidator子类会在表单元素后面显示提示信息，元素失去焦点时执行验证，如果验证失败会把错误以红色显示在表单元素后面。

　　框架使用prototype.js组件，这是一个很不错的组件噢。

题外话：初次在博客上发表自己的程序心得，感觉JAVAEYE这个编辑器不是太友好，而且速度不是很理想，写一篇文章太费事了，同时也发现要做一篇总结也是很耗费精力，需要能力的事情。

　　请大家多指教，通过如下方式可以和我联系：
MSN:white182517@hotmail.com
　　
  • Ec3693bb-05c5-4ef0-8d3d-7d110821bbb1-thumb
  • 描述: 类结构图
  • 大小: 46.2 KB
  • 53c1a745-925b-4b59-931d-24f5c0878ae0-thumb
  • 描述: 淘宝注册页面效果图
  • 大小: 87 KB
评论
jack.k.ch 2007-04-02
我最近也在写一个松散耦合的JS验证框架，已经快完工了，欢迎交流

GTALK：jackykwo@gmail.com
MSN: jackbaoerfox@hotmail.com
dennis_zane 2007-03-30
写这么长的函数名让人感觉不爽，我还是觉的使用xml定义验证规则更合适，比如Michal chen的jsvalidation框架
hiwzg 2007-03-30
挺不错的，赞。没有想到javascript这么strong
lighter 2007-03-16
看了一下,使用真的比较简单,对常用的验证已经够用了!
btw:"感觉JAVAEYE这个编辑器不是太友好，而且速度不是很理想",建议用BBCODE,就不会啦
pengjun_lovecoding@hotmail.com 2007-03-16

white182517 写道：
这个框架只有两个关键组件，Validation负责描述验证规则，Validator负责决定验证的表现逻辑。

楼上的意思是指扩展表现逻辑吗？比如给某个元素添加特定的事件及表现方式。

如果是这样的话，只需要扩展Validator即可，通过DOM操作给元素添加事件。




嗯，明白了，试试看看
cozone_柯中 2007-03-16
还不错,准备采用扩展以下
white182517 2007-03-16
这个框架只有两个关键组件，Validation负责描述验证规则，Validator负责决定验证的表现逻辑。

楼上的意思是指扩展表现逻辑吗？比如给某个元素添加特定的事件及表现方式。

如果是这样的话，只需要扩展Validator即可，通过DOM操作给元素添加事件。
pengjun_lovecoding@hotmail.com 2007-03-16
大概看了一下，很好能方便扩展验证规则。但是如果要给不同的验证指定不同的触发事件要怎么扩展呢？
fantasy 2006-11-29
很不错的构思.
white182517 2006-11-13
其实很想基于目前的框架，写一个比较完善一点的验证组件开源的，提供更丰富的验证规则，以及多种验证表现方式。
不过最近要转投C#阵营，工作也比较忙，所以在此只能抛砖引玉，希望有兴趣的朋友能进行重构和改善，并供大家一起分享。
jianfeng008cn 2006-11-12
看了一下 感觉很不错 打算下个项目的时候用用 谢谢LZ
white182517 2006-11-08
不好意思，测试的时候是基于一个已有的WEB工程来的，所以没有考虑到这一点。

现在把一个基于JS+HTML的版本提交。

如果在IE里有中文问题，改一下编码就OK了。
jianfeng008cn 2006-11-08
怎么就不是html+js的DEMO呢？