`
Javatar2199
  • 浏览: 4295 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

一个比较完善表单校验插件

阅读更多
(function($){
    $.fn.jStar.defaults = {
        validationAttr:      'vtype',       //需要校验的标识属性
        warnAttr:            'warnText',   //校验错误时提示的文本属性
        errorMsgs:           ''
    };
    $.fn.isValid=function(){
        var vFlds = findValidateFields($(this)),
            foucusFlag=0;
            options.errorMsgs='';
        var showErrorMsgsLengthFlag= 0,
            flag=0;//控制显示输入错误的提示信息条数
        $(vFlds).each(function(){
            var fldValidations=buildSingleFldVType(this);
            var errorMsg=buildErrorMsg(fldValidations,this);
            if(errorMsg&&3==showErrorMsgsLengthFlag&&0==flag){ //这个判断需要放在showErrorMsgsLengthFlag自增前面
                options.errorMsgs+='
  • ··· ···
  • ';
                    flag++;
                }
                if(errorMsg&&showErrorMsgsLengthFlag<3){
                    options.errorMsgs+=errorMsg;
                    showErrorMsgsLengthFlag++;
                }
            });
            //????光标定位????i still dont know how......
            var firstErrorMsg=options.errorMsgs.substring(0,options.errorMsgs.indexOf('<br/>'));
            if(firstErrorMsg){
                var obj = $('[warnText]',this);
                for(var i=0;i<obj.length;i++){
                    var errorMsg=$(obj[i]).attr('warnText');
                    if(firstErrorMsg==errorMsg){
    //                    showErrorMsgs();
                        obj[i].focus();
                        return false;
                    }
                }
            }

            if(options.errorMsgs.length>0)return false;
            else return true;
        };


        function buildErrorMsg(fldValidations, field) {
            var errorMsg = '';
            for(var i = 0; i < fldValidations.length; i++){
                var funcName = getVFunctionName(fldValidations[i]);
                var params = buildVParams(fldValidations[i]);
                if(!eval('$.fn.jStar.validations["'+funcName+'"](field, field.val()'+params+')')) {
                    errorMsg+='
  • '+$(field).attr(options.warnAttr)+'
  • ';
                }
            }
            return errorMsg;
        }
        //拿到需要校验元素的校验类型的参数。eg: range(1,100)
        function buildVParams(validation) {
            if(validation.indexOf('(') != -1) {
                var arr = validation.substring(validation.indexOf('(') + 1, validation.length - 1).split(',');
                var tempStr = '';


                for(var i = 0; i < arr.length; i++) {
                    var single = trim(arr[i]);
                    if(parseInt(single)) {
                        tempStr += ','+single;
                    } else {
                        tempStr += ',"'+single+'"'
                    }
                }


                return tempStr;
            } else {
                return '';
            }
        }


        //找到所有需要校验的元素
        function findValidateFields(form) {
            var tags = 'input textarea select'.split(' ');
            var fields = [];


            for(var i = 0; i < tags.length; i++) {
                form.find(tags[i]+'['+options.validationAttr+']').each(function() {
                    if($(this).attr(options.validationAttr)){//判断options.validationAttr是否为空
                        fields.push($(this));
                    }
                });
            }
            return fields;
        }
        //各元素需要校验的类型
        function buildSingleFldVType(field) {
            var valStr = field.attr(options.validationAttr);
            var fldValidations=[];
            var tempStr = '';
            var openBrackets = 0;
            for(var i = 0; i < valStr.length; i++) {
                switch(valStr[i]) {
                    case ',':
                        if(openBrackets) {
                            tempStr += ',';
                            openBrackets--;
                        } else {
                            fldValidations.push(trim(tempStr));
                            tempStr = '';
                        }
                        break;
                    case '(':
                        tempStr += '(';
                        openBrackets++;
                        break;
                    case ')':
                        tempStr += ')';
                        fldValidations.push(trim(tempStr));
                        tempStr='';
                        break;
                    default:
                        tempStr += valStr[i];
                }
                if(valStr.length-1==i&&')'!=valStr[i]){//判断最后一个字符是不是')',是则不执行下面一行代码
                    fldValidations.push(tempStr);
                }
            }
            return fldValidations;
        }


        function getVFunctionName(validation) {
            if(validation.indexOf('(') != -1) {
                return validation.substr(0, validation.indexOf('('));
            } else {
                return validation;
            }
        }
        //去掉前后导空格
        function trim(str) {
            return str.replace(/^\s+/, '').replace(/\s+$/, '');
        }
        var options={};
        options=$.fn.jStar.defaults;


    })(jQuery);
    0
    0
    分享到:
    评论

    相关推荐

      element-ui-verify:如果您受够了饿了么ElementUI原生的重置方式,那就来试试它吧!

      本人专注校准插件开发30年,有祖传的校验插件api设计(玩笑)。主要是参考了之前写的的api,并完善,取其精华,去其糟粕,揉和日月之精华。。。 本插件只是对ElementUI原本的校准方式做成一层封装,核心的校验器仍然...

      GoodProject Maven Webapp.zip

      jQuery EasyUI是基于JQuery的一个前台ui界面的插件,功能相对没extjs强大,但页面也是相当好看的,同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用,相对于extjs更轻量。 ...

      mahara教师评价系统

      在默认插件里选在 xmlrpc,点增加,会出现一个新页面如下 其中网站目录必须和实际 moodle 的目录一致。填完后提交。如果成功说明成功与 moodle 进行了通信,否则检查 moodle 的网络(networking)功能是否正常打开...

      CMS网站管理系统 v3.0 beta utf-8

      9、独创的Tags标签,该功能随着系统使用时间的增加,一个真正属于您自己的词库也在慢慢建立。可根据您的需要调用热门Tags,同论坛精华贴一样,让用户快速找到最有用的信息 10、配套采集功能。系统与ET采集系统无缝...

      ACTCMS网站管理系统 v4.0 build 20110623 UTF8 正式版.rar

      9、独创的Tags标签,该功能随着系统使用时间的增加,一个真正属于您自己的词库也在慢慢建立。可根据您的需要调用热门Tags,同论坛精华贴一样,让用户快速找到最有用的信息 10、配套采集功能。系统与ET采集系统无缝...

      ACTCMS网站管理系统 v4.0 build 20110623 GBK 正式版.rar

      9、独创的Tags标签,该功能随着系统使用时间的增加,一个真正属于您自己的词库也在慢慢建立。可根据您的需要调用热门Tags,同论坛精华贴一样,让用户快速找到最有用的信息 10、配套采集功能。系统与ET采集系统无缝...

      ACTCMS网站管理系统 v3.0 build 20100412 UTF8 精简版.rar

      9、独创的Tags标签,该功能随着系统使用时间的增加,一个真正属于您自己的词库也在慢慢建立。可根据您的需要调用热门Tags,同论坛精华贴一样,让用户快速找到最有用的信息 10、配套采集功能。系统与ET采集系统无缝...

      ACT文章管理系统

      9、独创的Tags标签,该功能随着系统使用时间的增加,一个真正属于您自己的词库也在慢慢建立。可根据您的需要调用热门Tags,同论坛精华贴一样,让用户快速找到最有用的信息 10、配套采集功能。系统与ET采集系统无缝...

      xi7.net生活窍门网整站.rar

      9、独创的Tags标签,该功能随着系统使用时间的增加,一个真正属于您自己的词库也在慢慢建立。可根据您的需要调用热门Tags,同论坛精华贴一样,让用户快速找到最有用的信息 10、配套采集功能。系统与ET采集系统无缝...

      ACTCMS网站管理系统 4.0 gbk 20110623.rar

      9、独创的Tags标签,该功能随着系统使用时间的增加,一个真正属于您自己的词库也在慢慢建立。可根据您的需要调用热门Tags,同论坛精华贴一样,让用户快速找到最有用的信息 10、配套采集功能。系统与ET采集系统无缝...

      ACTCMS网站管理系统 4.0 utf-8 20110623.rar

      9、独创的Tags标签,该功能随着系统使用时间的增加,一个真正属于您自己的词库也在慢慢建立。可根据您的需要调用热门Tags,同论坛精华贴一样,让用户快速找到最有用的信息 10、配套采集功能。系统与ET采集系统无缝...

    Global site tag (gtag.js) - Google Analytics