怎么自定义一个javascript验证框架

怎么自定义一个javascript验证框架？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

创新互联公司是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发，网站制作，网站设计，网站模板，微信公众号开发，软件开发，小程序设计，10年建站对成都搅拌罐车等多个行业，拥有多年的网站维护经验。

1. 验证框架主要采用 jquery异步对象去扩展的，也就是jquery defered 的用法，这样去做验证的好处是，即使某些验证是采用ajax 方式去验证的，结合jquery when 函数，一样可以批量校验. 主要代码如下:

function Validator(errorHandle){
  this.errorHandle = errorHandle;
  this.elements = ["input","select","textarea"];
}
Validator.prototype = {
    contructor : Validator,
    rules : {},
    addRules : function(ruleName, validFunction, errorFunction){
      this.rules[ruleName] = {
          validFunction : validFunction,
          errorFunction : errorFunction
      };
    },
    eventFunction : function(item){
      var self = this;
      $(item).die().live("blur", function(){
        self.validateItem(item);  
      });
    },
    bindingEvent : function(divId){
      var self = this;
      self.elements.forEach(function(element){
        $("#" + divId).find(element).each(function(i, item){
          self.eventFunction(item);    
        });
      });
    },
    validateDiv : function(divId){
      var dtdList = [],
        self = this;
        self.elements.forEach(function(element){
          $("#" + divId).find(element).each(function(i, item){
            dtdList.push( self.validateItem(item) );
          });          
        });
        self.elements.forEach(function(element){
          if ($("#" + divId).find(element).length == 0){
            var deferred = $.Deferred();
            deferred.resolve();
            dtdList.push(deferred);
          }        
        });
      return $.when.apply(null, dtdList).fail(function(){
        if(self.errorHandle) {
          self.errorHandle.call(null, divId);          
        }
      });
    },
    validateItem : function(d){
      var self = this;
      var ruleList = [];
      for(var r in this.rules){  
        if( $(d).is("[" + r + "]") ){
          ruleList.push(r);
        }
      }
      var dtd = $.Deferred();
      var checked = function(){  
        if ( ruleList.length >= 1 ){
          var ok = self.validate(d, ruleList[0]);
          ok.done(function(){
            if(ruleList.length >= 2){
              self.validate(d, ruleList[1]);
            }
            ruleList.shift();
            checked();
          }).fail(function(){
            dtd.reject();
          });
        } else {
          dtd.resolve();
        } ;
        //dtd.resolve();
        //return dtd;
      };
      checked();
      return dtd;
    },
    validate : function(d, rule){
      var value = $(d).val(),
        attributeValue = $(d).attr(rule),
        f = this.rules[rule].validFunction,
        self = this;      
      var ok = f.call(null, d, value, attributeValue);
      return ok.fail(function(item){
        if($(item).siblings("[validationError]").length != 0 ){
          $(item).siblings("[validationError]").remove();              
        }
        if(self.rules[rule].errorFunction){
          self.rules[rule].errorFunction(d, rule);
        }else {
          self.showErrorMessage(d, rule);          
        }
      }).done(function(item){
        if($(item).siblings("[validationError]").length != 0 ){
          $(item).siblings("[validationError]").remove();              
        }
      });
    },
    validationByRegx : function(d, value, regx){
      var dtd = $.Deferred(),
      ok = regx.test(value);
      if(ok || $.trim(value) === ""){
        dtd.resolve(d);
      } else {
        dtd.reject(d);
      }
      return dtd.promise();
    },
    /*默认的出错处理方法*/
    showErrorMessage : function(item,rule){
      var msgInfo = getJSLocale( $(item).attr("msgid") );
      var ruleInfo = getJSLocale( "msg_" + rule );
      if($(item).siblings("span").find("[msgid='msg_"+ rule +"']").length == 0){
        var message = msgInfo || ruleInfo;
        $(item).parent().append("" + message + "");        
      }
    }
};
//add default rule
Validator.prototype.addRules("required", function(d, value, attributeValue){
  var dtd = $.Deferred();
  var ok = !($.trim(value) == "" || value == null);
  if(ok){
    dtd.resolve(d);
  } else {
    dtd.reject(d);
  }
  return dtd.promise();
});
Validator.prototype.addRules("maxLen", function(d, value, attributeValue){
  var dtd = $.Deferred();
  var ok = (value.length <= attributeValue);
  if(ok){
    dtd.resolve(d);
  } else {
    dtd.reject(d, attributeValue);
  }
  return dtd.promise();
}, function(d, rule){
  if($(d).siblings("span").find("[msgid='msg_" + rule + "']").length == 0){
    var attributeValue = $(d).attr(rule);
    var msgInfo = getJSLocale( $(d).attr("msgid"), {length:attributeValue} );
    var ruleInfo = getJSLocale( "msg_" + rule, {length:attributeValue} );
    var message = msgInfo || ruleInfo;
    $(d).parent().append("" + message + "");        
  }
});
Validator.prototype.addRules("minLen", function(d, value, attributeValue){
  var dtd = $.Deferred();
  var ok = (value.length >= attributeValue);
  if(ok){
    dtd.resolve(d);
  } else {
    dtd.reject(d, attributeValue);
  }
  return dtd.promise();
}, function(d, rule){
  if($(d).siblings("span").find("[msgid='msg_" + rule + "']").length == 0){
    var attributeValue = $(d).attr(rule);
    var msgInfo = getJSLocale( $(d).attr("msgid"), {length:attributeValue} );
    var ruleInfo = getJSLocale( "msg_" + rule, {length:attributeValue} );
    var message = msgInfo || ruleInfo;
    $(d).parent().append("" + message + "");        
  }
});
Validator.prototype.addRules("url", function(d, value, attributeValue){
  return Validator.prototype.validationByRegx(d, value, /^(((ht|f)tp(s?))\:\/\/)[a-zA-Z0-9]+\.[a-zA-Z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/i);
});
Validator.prototype.addRules("email", function(d, value, attributeValue){  
  return Validator.prototype.validationByRegx(d, value, /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/);
});
Validator.prototype.addRules("english", function(d, value, attributeValue){  
  return Validator.prototype.validationByRegx(d, value, /^[a-zA-Z0-9_\-]+$/);
});

对于html 页面的验证方式呢，采用如下方式:

自定义验证框架测试
  

    
        
      english:  
        
        
      email:   
      
        请选择
        中国
      
      
       
      自定义错误信息:  
    
    验证
    Load 中文国际化
    Load English i18N