表单验证工具V0.2

DK 于2011,11,02发表 | 2 评论 »

是的，我又把那个表单验证工具重构了一遍。事实证明上一个版本的表单验证工具API设计的还算是比较成功，起码这个版本完全重构后，基本的API没有改动。只是对实现部分的代码进行了彻底的重构。由于使用了jQuery的ajax相关功能，所以需要本控件需要jQuery支持。

表单验证工具v0.2-API

上一个版本中是把所有的规则存储到一个缓存中，然后通过统一的方法进行节点的验证，这样带来的不便就是需要在全局对所有的节点进行控制，现在是将检查的节点封装一个对象，让数据和行为联系更加紧密，每个人只干自己的事情，逻辑上更加清晰。全局validate对象只负责初始化和最终表单整体的验证，以及提供一些工具方法。另外将提示信息也封装成为一个对象，便于提示信息样式的更改。

validate对象现在只包含两个对外开放的方法，一个是init，一个是check。init方法用于初始化，传入相关的对象id，规则，事件等信息，check方法用于检查整个表单是否通过验证，当表单中含有ajax验证时，会在验证通过后调用回调函数。

check方法有个可选的回调函数参数，当验证规则中存在ajax验证时，控件并不能即时给出验证结果，具体的验证结果会在ajax回调完成后得出。所以这里只要存在尚未验证过的ajax验证，check方法总是会返回false。如果通过调用后想执行一些操作，就需要将需要操作的步骤写到check方法的回调函数中。这样在validate在进行完ajax检查并且通过验证后会调用方法。

VNode对象代码的主体结构如下：

var VNode = function(rule){
oself.check = function(isLocal){
o//local check
o//ajax check
o};

oself.checkAjax = function(fn){};

oself.reset = function(){};

oself.checkManul = function(isLocal){};

oself.checkEvent = function(e){};

oself.resetEvent = function(){};

oif(rule.trigger){
orule.trigger.call(self);
o}else{
o$(self.node).bind(validate.config.trigger, self.checkEvent);
o}
o$(self.node).bind(validate.config.reset, self.resetEvent);
};

这里VNode包含了所有的数据，规则，以及验证的逻辑，验证的时候要做的就是新建一个VNode对象，剩下的工作交个VNode来做就好了。VNode对象主要是根据提供的规则信息获取要验证的元素，然后对要验证的元素按照一定的次序进行验证，包括自定义的验证方法，长度，自定义的正则表达式，系统提供的正则验证，ajax验证。所有的验证都是验证规则存在是才进行的。

VNode对象也提供了两个钩子，一个是自定义验证函数，一个是自定义触发验证函数。自定义验证函数用于处理复杂逻辑的验证，自定义触发验证函数默认取代blur方法，用于日历控件等等选择方式的验证。

还有一个重要的对象就是HintMessage对象，这个对象其实就是根据给出的引用节点，自动计算出提示信息该显示的位置。当然它有相应的参数控制显示的偏移量，默认是与给出的节点位置重合的。当然新实例化一个HintMessage对象并不能显示出提示信息，要想显示提示信息还需要调用HintMessage.show(message, messageType)方法来显示相应的信息以及相应的信息类型。信息类型包含以下几种：

//错误
HintMessage.ERROR = 0;
//警告
HintMessage.WARNING = 1;
//消息
HintMessage.MESSAGE = 2;
//成功
HintMessage.SUCCESS = 3;

每种消息类型对应不同的样式名称，你可以通过自定义样式来显示不同样式的提示信息。当然HintMessage还有一点要注意就是给window对象绑定onresize事件，当窗口改变大小的时候需要重新计算提示信息显示的位置。绝对定位带来方便的同时也有些副作用。

点击下载源文件

相关文章：

    o

  1. 表单验证工具

转载请注明原文出处《表单验证工具V0.2》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。

标签: | 分类： Javascript, 编程

表单验证工具

DK 于2011,02,11发表 | 6 评论 »

表单验证大约是每一个js coder面对最多的问题，只要涉及到数据提交就会碰到表单验证的工作。点击查看演示效果

表单验证的工作其实思路是非常简单的，就是获取表单内的数据，根据已有的规则判断数据是否合法，然后给出相应的提示。最直接的反应就是，根据id获取dom以及其value，通过if else条件语句判断，给出结果，OK就这么简单，收工。

问题解决了，大家各回各家当然接下来会碰到的就是无休无止的条件判断，以及页面上到处充斥的垃圾代码，这种情况是让有轻微代码洁癖的同学所无法接受的，所以就有了表单验证工具，通过简单的配置来实现代码的重用，同时也提高了开发效率。

但是接下来又碰到一个问题，前端的工作是在是太复杂多变了（当然这也是之所以前端工作吸引我们的地方），简简单单的工具是无法应付如此之复杂多变的情况的。是的，我们可以通过对格式或者编码进行强制要求来实现我们的目的，但是这明显是不可行的。

要解决这个问题有两个办法：

  1. 通过代码生成工具，写一个应用，根据要求生成个性化的代码，这样就可以解决各种各样复杂的情况（呃，这大约可以称作为器械流，思想不端正的同学面壁去）
  2. 一个强健的，又足够灵活的代码结构，通过配置来实现各种个性化的应用（技术流）

崇尚技术的我们必须得选择技术流XD。

首先看一下最可能碰到的几种情形：格式检查，比如最常见的电子邮件格式合法性；是否为空检查；检查是否存在。这几种应该是最常用的，当然应该还有重复密码匹配，长度等检查。

其实，看起来情况这么多，其实就两种情况，一种是本地的检查，一种是ajax的检查。本地的检查也就是在客户端，用javascript就能搞定，ajax的则需要与后台进行交互，需要等待返回值，然后再去检查，这个需要后台的配合。

这里使用正则表达式来检查本地数据是否合法，通过jsonp与后台交互，要求后台返回规定格式的数据，进行ajax的检查。

看一下用到的正则：

  1. {
  2. otypes : {
  3. onotEmpty : {regExp : /.+/, message :  '请检查确认填写的项目不为空'},
  4. oemail : {regExp : /^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$/ ,message:'请检查电子邮件的格式'},
  5. ocellphone: {regExp: /\d{13}/, message: '请检查手机号码'},
  6. odate: {regExp: /^\d{4}-\d{1,2}-\d{1,2}$/, message: '请检查日期'}
  7. o}
  8. }

这里没有添加太多的类型，只添加了最常用的几个，大家可以根据自己的需要添加不同的检验类型，比如身份证号码等等。

当然现在这里只是采用了比较简单直接的测试方式。下面提供使用说明，进一步的代码设计和优化将在后续文章中提及。

  1. 你需要在dom加载完成或者文档的结尾部分调用validate.init()方法。你需要做的就是保证验证工具初始化的时候保证dom已经存在。
  2. 你只需要调用validate.init()方法即可。这个方法接受两个参数，第一个必选参数数组，包括要验证那些控件等等，第二个是可选参数，提交按钮的id。
  3. 第一个必选参数是数组类型的，数组元素是json对象，每个json对象包括：id，type两个属性，分别为要检查的控件的id和检查的类型。例如：{id: ‘username’, type: ’email’}
  4. type类型的结尾加?号表示当前类型可为空，比如type: ’email’表示当前控件内容应该是email而且不为空的email，如果是type: ’email?’那么就是可以为空的email，当内容为空或者为email的时候都合法。
  5. 除了这两个必须的属性，还有其他的可选属性，总共包括一下几个属性：id, type, errorMsg（自定义错误信息）, url（ajax请求，返回值应为json，包括status和msg两个属性）, valid（自定义检查方法，返回true或false）, trigger（自定义触发事件，当事件发生时触发validate.checkNode()方法）。

    转载请注明原文出处《表单验证工具》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。

    标签: | 分类： Javascript, 编程