`
white182517
  • 浏览: 162690 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多
问题描述

  一直以来项目中都是使用阿赖的验证框架来完成项目中的页面验证功能(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
分享到:
评论
13 楼 jack.k.ch 2007-04-02  
我最近也在写一个松散耦合的JS验证框架,已经快完工了,欢迎交流

GTALK:jackykwo@gmail.com
MSN: jackbaoerfox@hotmail.com
12 楼 dennis_zane 2007-03-30  
写这么长的函数名让人感觉不爽,我还是觉的使用xml定义验证规则更合适,比如Michal chen的jsvalidation框架
11 楼 hiwzg 2007-03-30  
挺不错的,赞。没有想到javascript这么strong
10 楼 lighter 2007-03-16  
看了一下,使用真的比较简单,对常用的验证已经够用了!
btw:"感觉JAVAEYE这个编辑器不是太友好,而且速度不是很理想",建议用BBCODE,就不会啦
9 楼 过河卒 2007-03-16  
<br/>
<strong>white182517 写道:</strong><br/>
<div class='quote_div'>这个框架只有两个关键组件,Validation负责描述验证规则,Validator负责决定验证的表现逻辑。<br/>
<br/>
楼上的意思是指扩展表现逻辑吗?比如给某个元素添加特定的事件及表现方式。<br/>
<br/>
如果是这样的话,只需要扩展Validator即可,通过DOM操作给元素添加事件。</div>
<br/>
<br/>
<br/>
<br/>
嗯,明白了,试试看看
8 楼 cozone_柯中 2007-03-16  
还不错,准备采用扩展以下
7 楼 white182517 2007-03-16  
这个框架只有两个关键组件,Validation负责描述验证规则,Validator负责决定验证的表现逻辑。<br/>
<br/>
楼上的意思是指扩展表现逻辑吗?比如给某个元素添加特定的事件及表现方式。<br/>
<br/>
如果是这样的话,只需要扩展Validator即可,通过DOM操作给元素添加事件。
6 楼 过河卒 2007-03-16  
大概看了一下,很好能方便扩展验证规则。但是如果要给不同的验证指定不同的触发事件要怎么扩展呢?
5 楼 fantasy 2006-11-29  
很不错的构思.
4 楼 white182517 2006-11-13  
其实很想基于目前的框架,写一个比较完善一点的验证组件开源的,提供更丰富的验证规则,以及多种验证表现方式。
不过最近要转投C#阵营,工作也比较忙,所以在此只能抛砖引玉,希望有兴趣的朋友能进行重构和改善,并供大家一起分享。
3 楼 jianfeng008cn 2006-11-12  
看了一下 感觉很不错 打算下个项目的时候用用 谢谢LZ
2 楼 white182517 2006-11-08  
不好意思,测试的时候是基于一个已有的WEB工程来的,所以没有考虑到这一点。

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

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

相关推荐

    java开源包3

    xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...

    java开源包4

    xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...

    java开源包8

    xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...

    java开源包11

    xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...

    java开源包1

    xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...

    java开源包2

    xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...

    java开源包6

    xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...

    java开源包5

    xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...

    java开源包10

    xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...

    java开源包7

    xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...

    java开源包9

    xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...

    java开源包101

    xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...

    Java资源包01

    xSocket是一个轻量级的基于nio的服务器框架用于开发高性能、可扩展、多线程的服务器。该框架封装了线程处理、异步读/写等方面。 Java多线程程序死锁检查 JCarder JCarder 是一个用来查找多线程应用程序中一些潜在的...

    JAVA上百实例源码以及开源项目源代码

    JavaScript万年历 显示出当前时间及年份,还可以选择年份及月份和日期 Java编写的HTML浏览器 一个目标文件 摘要:Java源码,网络相关,浏览器 Java编写的HTML浏览器源代码,一个很简单甚至不算是浏览器的HTML浏览器,...

    ASP_NET_MVC3中文版教程.rar

    6. **jQuery**和**Unobtrusive JavaScript**:MVC3鼓励使用Unobtrusive JavaScript,这是一种在HTML中嵌入JavaScript的非侵入式方式,通常配合jQuery库使用,可以实现优雅的页面交互和异步更新。 7. **单元测试**:...

    JavaScript实现AOP详解(面向切面编程,装饰者模式)

    以下是一个简单的实现AOP的JavaScript代码示例,用于演示如何通过扩展Function.prototype来实现before和after方法: ```javascript Function.prototype.before = function(beforefn) { var _self = this; // 保存...

    Asp.net Mvc 3安装包

    5. **改进的验证机制**:ASP.NET MVC 3包含了一个增强的验证框架,支持客户端和服务器端验证。开发者可以使用DataAnnotations特性来定义验证规则,这些规则会在用户提交表单时自动执行。 6. **依赖注入(DI)与控制...

    ASP.NET.MVC3.0中文版教程

    ASP.NET MVC 3.0是微软开发的一款用于构建动态、数据驱动的Web应用程序的框架,它结合了ASP.NET的功能性和MVC(Model-View-Controller)设计模式的优点。本教程针对初学者,采用中文版,旨在帮助零基础的学习者快速...

Global site tag (gtag.js) - Google Analytics