问题描述
一直以来项目中都是使用阿赖的验证框架来完成项目中的页面验证功能(
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
- 描述: 类结构图
- 大小: 46.2 KB
- 描述: 淘宝注册页面效果图
- 大小: 87 KB
分享到:
相关推荐
xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...
xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...
xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...
xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...
xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...
xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...
xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...
xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...
xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...
xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...
xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...
xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...
xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...
6. **jQuery**和**Unobtrusive JavaScript**:MVC3鼓励使用Unobtrusive JavaScript,这是一种在HTML中嵌入JavaScript的非侵入式方式,通常配合jQuery库使用,可以实现优雅的页面交互和异步更新。 7. **单元测试**:...
以下是一个简单的实现AOP的JavaScript代码示例,用于演示如何通过扩展Function.prototype来实现before和after方法: ```javascript Function.prototype.before = function(beforefn) { var _self = this; // 保存...
5. **改进的验证机制**:ASP.NET MVC 3包含了一个增强的验证框架,支持客户端和服务器端验证。开发者可以使用DataAnnotations特性来定义验证规则,这些规则会在用户提交表单时自动执行。 6. **依赖注入(DI)与控制...
2. **构造子注入**:依赖项通过构造函数参数传递,这种方式确保了依赖关系在对象创建时即已确定,有利于实现不可变对象。 3. **设值注入**:依赖项通过setter方法注入,这是最常用的依赖注入方式,因为其灵活性较高...
ASP.NET MVC 3.0是微软开发的一款用于构建动态、数据驱动的Web应用程序的框架,它结合了ASP.NET的功能性和MVC(Model-View-Controller)设计模式的优点。本教程针对初学者,采用中文版,旨在帮助零基础的学习者快速...
类允许创建具有属性和方法的对象,而接口则定义了对象的结构,提供了一种方式来规范对象的形状,提高了代码的可扩展性和可维护性。 3. **模块系统**:TypeScript支持ES6的模块语法,使得代码组织更加清晰,便于导入...