表单验证工具V0.2
是的，我又把那个表单验证工具重构了一遍。事实证明上一个版本的表单验证工具API设计的还算是比较成功，起码这个版本完全重构后，基本的API没有改动。只是对实现部分的代码进行了彻底的重构。由于使用了jQuery的ajax相关功能，所以需要本控件需要jQuery支持。
上一个版本中是把所有的规则存储到一个缓存中，然后通过统一的方法进行节点的验证，这样带来的不便就是需要在全局对所有的节点进行控制，现在是将检查的节点封装一个对象，让数据和行为联系更加紧密，每个人只干自己的事情，逻辑上更加清晰。全局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
- 表单验证工具
转载请注明原文出处《表单验证工具V0.2》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。