日期:2014-05-17  浏览次数:20674 次

自己写的一个类似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){
                    targetEnumIdValidi