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

[color=blue][size=12]问题描述[/size][/color]

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

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

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

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

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

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

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


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

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

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

[b]表单页面：[/b]

[code] <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>[/code]
[b]指定验证规则:[/b]

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

[b]执行验证[/b]

[code]validator.validate();[/code]

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

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

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

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

　　请大家多指教，通过如下方式可以和我联系：
[size=12][color=blue]MSN:white182517@hotmail.com[/color][/size]