自己写的一个类似html5表单属性的表单验证小框架基于jquery -

green_tea

浏览: 4711 次
性别:
来自: 北京务工人员

最近访客更多访客>>

jianfeng

孟雪雪

qq526966394

smzyyyjyrctl

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2)

社区版块

存档分类

自己写的一个类似html5表单属性的表单验证小框架基于jquery

/用户注册&登录 相关js函数    （基于jquery库）



/**
 * 验证表单元素   仅支持必填和 格式校验  密码匹配     
 * @param id    表单id
 * @param options    { errorElClass errorShowClass loop}
 * 实例：text <input name="username" type="text" id="username"  regValidityTxt="格式为10位数字" reg="^[0-9]{10}$"  errorLabel="usernameError" notBlank="notBlank" valueMissingTxt="不能为空">
 * textarea <textarea rows="1" cols="1" id="textarea" reg="^[a-z]{2,8}$" regValidityTxt="格式错误a-z" errorLabel="emailError" notBlank="notBlank" valueMissingTxt="不能为空">asdfadf</textarea>
 * 单选和多选 <input type="checkbox" name="agree" value="true" requiredCheck="requiredCheck" requiredCheckTxt="请阅读协议" 1errorLabel="checkError"/>
 *  <input name="repassword" type="password" id="repassword" notBlank="notBlank" valueMissingTxt="不能为空" errorLabel="confirmError" matchFor="password" matchForTxt="两次输入密码不一致"/>
 */
var validateForm = function(id,options){
    var errorCount = 0 ;
    var targetEnumIdValidity = true;
    var isTargetEnum = false;  //是否单个元素验证
    var $enum = $('form#'+id+' :input,textArea,select');    //需要校验的元素
    var errorElClass  = options.errorElClass?options.errorElClass:"error";       //验证失败样式
    var errorShowClass = options.errorShowClass?options.errorShowClass:"errorLabel";
    var targetEnumId = options.targetEnumId;
    var tipClass =   options.tipClass?options.tipClass:"tipClass";
    var showTip =  options.showTip;
    var loop =  options.loop;             //是否全部校验 （否 如果有一个校验失败则停止校验）
    $.each($enum,function(){
        var $e = $(this);
        if(targetEnumId){
            if(targetEnumId!=$e.attr('id'))
                isTargetEnum = true;
            else
                isTargetEnum =false;

        }
       if(!isTargetEnum){
        var reg = $e.attr('reg');             //需要添加元素属性reg  正则
        var matchFor = $e.attr('matchFor');             //匹配
        var matchForTxt = $e.attr('matchForTxt');             //匹配不成功 提示
        var regValidityTxt = $e.attr('regValidityTxt');      //匹配失败 提示（可为空）
        var notBlank =$e.attr('notBlank');                   // 必填
        var valueMissingTxt = $e.attr('valueMissingTxt');    // 为空提示
        var requiredCheck = $e.attr('requiredCheck');       //必选
        var requiredCheckTxt = $e.attr('requiredCheckTxt');   //未选提示
        var errorLabel = $e.attr('errorLabel');
        var $error = $('#'+errorLabel);
        var val = $e.val();
        var tip =  $e.attr('tip')? $e.attr('tip'): $e.attr('regValidityTxt');

        //元素获取焦点取消错误样式
        $e.focus(function(){
            $error.html('');
            $error.removeClass(errorShowClass);
            $e.removeClass(errorElClass);
            if(showTip){
               $error.addClass(tipClass);
            }  $error.html(tip);
        });

        if(requiredCheck){
            //用于判断是否勾选 阅读条款
            if($e.is("input:radio,input:checkbox")){
                 if(!$e.is(":checked")){
                   commonDo($e,$error,requiredCheckTxt,errorShowClass,errorElClass,showTip,tipClass);
                   if(!loop){
                       targetEnumIdValidity = false;
                       return;
                   }
                   errorCount++;
                 }
             }
        }
        //判断非空 必填字段
        if(notBlank){
            if (val == undefined || val == null || val == "null" || val.trim() == "" || val.trim().length == 0){
                   commonDo($e,$error,valueMissingTxt,errorShowClass,errorElClass,showTip,tipClass);
                   if(!loop){
                      targetEnumIdValidity = false;
                      return;
                   }
                   errorCount++;
            }
        }
        //判断正则
        if(reg){
            var $reg = new  RegExp(reg);
            if(!$reg.test(val)){
                commonDo($e,$error,regValidityTxt,errorShowClass,errorElClass,showTip,tipClass);
                if(!loop){
                    targetEnumIdValidity = false;
                    return;
                }
                errorCount++;
            }
        }
        //判断是否与目标表单值相等  主要用于密码确认
        if(matchFor){
             var $matchTarget = $('#'+matchFor);
             if($matchTarget && ($matchTarget.val() != val)){

              commonDo($e,$error,matchForTxt,errorShowClass,errorElClass,showTip,tipClass);
                if(!loop){
                    targetEnumIdValidity = false;
                    return;
                }
                errorCount++;
             }
        }
       }
    });
    // js return在each 循环中 为跳出循环
    if(loop)
       return !errorCount;
    else
        return targetEnumIdValidity;
}

/**
 * 表单验证 效果  qianxiaozhi
 * @param $e 
 * @param $error
 * @param text
 * @param errorShowClass
 * @param errorElClass
 */
function commonDo($e,$error,text,errorShowClass,errorElClass,showTip,tipClass){
     if($error){
               $error.html(text?text:'');
               $error.addClass(errorShowClass);
               if(showTip){
                   $error.removeClass(tipClass);
               }
            }
           if(errorElClass){
               $e.addClass(errorElClass);
           }
}
/**
 * 异步提交订单   
 * @param options
 */
var submitCallBack = function(options){
    var errorElClass  = options.errorElClass?options.errorElClass:"error";       //验证失败样式
    var errorShowClass = options.successShowClass?options.successShowClass:"errorLabel";
    var targetEnumId = options.targetEnumId? options.targetEnumId:"error";
    var error =    options.error;

    var $e = $("#"+targetEnumId);
    if($e){
        var errorLabel = $e.attr('errorLabel');
        var $error = $('#'+errorLabel);
        //填充错误信息
        commonDo($e,$error,error,errorShowClass,errorElClass);
    }
}

/**
 * 表单元素渲染  是否支持tip
 * @param id
 * @param option
 */
var formTipRender = function(id,tipClass){
      var $enum = $('form#'+id+' :input,textArea,select');    //需要校验的元素
      var $tipClass =   tipClass?tipClass:"tipClass";
     $.each($enum,function(){
         var $e = $(this);
         var tipShowLabel = $e.attr('tipShowLabel')?$e.attr('tipShowLabel'):$e.attr('errorLabel');
         var tip =  $e.attr('tip')? $e.attr('tip'): $e.attr('regValidityTxt');
         //元素获取焦点取消错误样式
        $e.focus(function(){
            if(tipShowLabel){
                var $tip = $('#'+tipShowLabel);
                if($tip){
                    $tip.removeClass();
                    $tip.addClass($tipClass);
                }   $tip.html(tip);
                }

        });

         $e.blur(function(){
            var $tip = $('#'+tipShowLabel);
            if(tipShowLabel && $tip.hasClass($tipClass)){
               $tip.html('');
            }
        });
     });
}

使用实例：

 <input name="username" type="text" id="username" value="$!stringEscapeUtils.escapeHtml($!username)" class="common-input" placeholder="请输入用户名" reg="^[(\u4e00-\u9fa5)a-zA-Z0-9_-]{2,20}$" regValidityTxt="用户名由英文、数字、汉字或“_”、“-”4-20位字符组成" errorLabel="usernameError" notBlank="notBlank" valueMissingTxt="用户名不能为空">
 <div id="usernameError" class="tipClass" ></div>

<input type="password" name="password" id="password" class="common-input"  placeholder="请输入密码" notBlank="notBlank" reg="^[a-zA-Z0-9_-]{6,16}$" regValidityTxt="密码由英文、数字或“_”、“-”6-16位字符组成" valueMissingTxt="密码不能为空" errorLabel="pwdError">
<div id="pwdError" class="tipClass"></div>
<input name="repassword" type="password" id="repassword" class="common-input" placeholder="请再次输入密码" notBlank="notBlank" tip="请再次输入密码" valueMissingTxt="密码不能为空" errorLabel="confirmError" matchFor="password" matchForTxt="两次输入密码不一致">
 <div id="confirmError" class="tipClass"></div>

页面引入js部分

 //绑定邮箱焦点离开事件
            $('#password').blur(function(){
                validateForm('frm_reg',{loop:false,targetEnumId:$(this).attr('id'),errorElClass:"error-common-input",errorShowClass:"red",
                showTip:true,tipClass:"tipClass"});
            });

             //绑定邮箱焦点离开事件
            $('#repassword').blur(function(){
                validateForm('frm_reg',{loop:false,targetEnumId:$(this).attr('id'),errorElClass:"error-common-input",errorShowClass:"red",
                showTip:true,tipClass:"tipClass"});
            });

//表单提交 验证所有元素是否符合要求
            $('#btnRegister').click(function(){
                //做一些简单规则验证 异步提交由后台判断其他情况
                var options ={loop:true,errorElClass:"error-common-input",errorShowClass:"red",showTip:true,tipClass:"tipClass"};
                if(validateForm('#frm_reg',options)){
                   $('#frm_reg').submit();
                }
            });