基于jquery的自定义校验框架

本校验器基于jqery1.8.3

/**
 * Validator
 */
function DataValidator(){
   
   this.rule = {} ;
   this.isBlur = true ; 
   var required = function(field , active , message){
      if( active == "false" ) return true ;
      var msg = message + "不能为空哦!" ;
      var val = $("#"+field).val() ;
      var bRtn = val!=null && typeof(val) != "undefined" && val.replace(/(^\s*)|(\s*$)/g,"") != "" ;    
      setMsg(field , msg , bRtn ) ;
      return  bRtn;
   };
   var gt = function( field , number , message ){
      if($("#"+field).val()=="")return true ;
      var msg = message + "长度大于等于"+number+"!" ;
      var val = $("#"+field).val() ;
      var bRtn = val.length >= parseInt( number ) ;
      setMsg(field , msg , bRtn ) ;
      return  bRtn;
   } ;
   var lt = function( field , number , message ){
      if($("#"+field).val()=="")return true ;
      var msg = message + "长度小于等于"+number+"!" ;
      var val = $("#"+field).val() ;
      var bRtn = val.length <= parseInt( number ) ;
      setMsg(field , msg , bRtn ) ;
      return  bRtn;
   };
   var email = function( field , active , message ){
      if($("#"+field).val()=="")return true ;
      if( active == "false")return true ;
      var msg = message + "email格式不正确"+"!" ;
       var pattern=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; 
       var val = $("#"+field).val() ;
       var bRtn =pattern.test(val);
       setMsg(field , msg , bRtn ) ;
      return  bRtn;
   };
   var phone = function( field , active , message ){
      if($("#"+field).val()=="")return true ;
      if( active == "false")return true ;
      var msg = message + "格式不正确";
      //var isMobile=/^1[3|4|5|8][0-9]\d{4,8}$/; 
      var isMobile=/^[0-9]{11}$/;
      var bRtn = isMobile.test($("#"+field).val()) ;
      setMsg(field , msg , bRtn ) ;
      return bRtn ;
   };
   var isNum = function( field , active , message ){
      if($("#"+field).val()=="")return true ;
      if( active == "false" ) return true ;
      var msg = message + "不是数字类型" ;
      var bRtn = !isNaN( $("#"+field).val()) ;
      setMsg(field , msg , bRtn ) ;
      return bRtn ;
      
   };
   var notNum = function( field , active , message ){
      if($("#"+field).val()=="")return true ;
      if( active == "false" ) return true ;
      var msg = message + "不能全部是数字" ;
      var bRtn = isNaN( $("#"+field).val()) ;
      setMsg(field , msg , bRtn ) ;
      return bRtn ;
      
   };
   var eq = function( field , val , message ){
      if($("#field").val() == "" ) return true ;
      var msg = message + "不一致" ;
      var bRtn = ($("#"+field).val() == $("#"+val).val()) ;
      setMsg( field , msg , bRtn ) ;
      return bRtn ;
   };
   var fixLen = function( field , val , message ){
      var msg = message + "长度应为"+ val + "位" ;
      var bRtn = ($("#"+field).val().length == val) ;
      setMsg( field , msg , bRtn ) ;
      return bRtn ;
   };
   var setMsg = function( field , msg , b){   
      if(b){
         $("#"+field).prevAll().filter("span").html("") ;
         return ;
      }
      $("#"+field).prevAll().filter("span").html("<font color=red >" +msg+ "</font>") ;
   };
   this.clearForm = function(){
      for( var field in this.rule ){
         if( this.rule[field].defaultValue != "undefined" ){
            $("#"+field).val( this.rule[field].defaultValue ) ;
         }else{
            $("#"+field).val("") ;
         }
         setMsg( field , "" ) ;
      }
   };
   
   var Callback = function(){
      var blurCallbackStack = [];
      var focusCallbackStack = [] ;
      this.setBlurCallback = function(bcs){
         blurCallbackStack = bcs ;
      };
      this.setFocusCallback = function(fcs){
         focusCallbackStack = fcs ;
      };
      this.blureCallback = function(){
         if( blurCallbackStack.length  == 0 ) return false ;
         for( var bc in blurCallbackStack ){
            if( typeof( blurCallbackStack[bc] ) == "function" ){
               if(!blurCallbackStack[bc]() ) break;
            }else if( typeof(blurCallbackStack[bc]) == "string"){
               if(!eval(blurCallbackStack[bc]))break ;
            }
         }
      };
      this.focusCallback = function(){
         if(focusCallbackStack.length == 0 ) return false ;
         for(var fc in focusCallbackStack ){
            if( typeof(focusCallbackStack[fc]) == "function"){
               if(!focusCallbackStack[fc]()) break ;
            }else if(typeof(focusCallbackStack[fc]) == "string"){
               if(!eval(focusCallbackStack[fc]))break ;
            }
            
         }
      };
   };
   
   this.init = function( rule ){
      this.rule = rule ;
      for( var r in rule ){
         var blurCallbackStack = [] ;
         var focusCallbackStack = [] ;
         if(! document.getElementById(r)){

         }
         
         
         var field = r ;
         var name = rule[r].name ;
         var ms = rule[r].method ;
         for( var m in ms ){
            var func = m + "('" + field + "','" + ms[m]+"','" + name +"')" ; 
            blurCallbackStack.push(func) ;
         }
         if( typeof( rule[r].onBlur ) == "function" ){
            blurCallbackStack.push( rule[r].onBlur );
         }
         if( typeof( rule[r].onFocus ) == "function" ){
            focusCallbackStack.push( rule[r].onFocus );
         }
         var callBackObj = new Callback() ;
         callBackObj.setBlurCallback(blurCallbackStack) ;
         callBackObj.setFocusCallback(focusCallbackStack) ;
         if(document.getElementById(r)){
            document.getElementById(r).onblur = callBackObj.blureCallback ;
            document.getElementById(r).onfocus = callBackObj.focusCallback ;
         }
         
      }
   };
   this.validate = function(){
      var success = true ;
      for( var field in this.rule ){
         var fieldSuccess = true;
         var msg = this.rule[field].name ;
         var vs = this.rule[field].method ;
         for( var m in vs ){
            var func = m+"('"+field+"' , '"+vs[m]+"' , '"+ msg +"' )" ;
            if( !eval( func) ){
               success = false ;
               fieldSuccess = false;
               break ;
            }
         }
         
         if(fieldSuccess){
            $("#"+field).nextAll().filter("span").html("") ;
         }
         
      }
      return success ;
   };
}
(function(win){win.validator = new DataValidator() ;})(window) ;

页面:

<html>
<head>
    <title>登录页</title>
    <script src="static/js/jquery-1.8.3.min.js"></script>
    <script src="static/js/common.js"></script>
</head>
<script>
    $(document).ready(function(){
        var rule={
            account:{
                name:"用户名",
                method:{
                    required : true
                }
            }
        }
        validator.init(rule);
    })
</script>
<body>
<form action="" method="post">

    <div> <span></span>账  号:<input type="text" name="account" id="account"></div>
    <div>密  码:<input type="text" name="password"></div>
    <div><input type="submit" value="登录"></div>
</form>
</body>
</html>

 var rule={
            account:{
                name:"用户名",
                method:{
                    required : true
                }
            }
        }

注意:common.js对应的就是上面的校验代码

<div> <span></span>账  号:<input type="text" name="account" id="account"></div>

<span></span>必须与需要校验的元素在同一级,如在同一个div内

代码讲解:

将需要校验的元素用上面的代码的形式进行设置,name,method是固定的,method里可以放各种自己设置的校验规则

具体校验实现的逻辑是通过在页面内的rule拼装成一个 func:"required('account','true','用户名')", 然后根据该字符串eval()去执行预先定义好的规则