您的位置:首页 > Web前端 > JQuery

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

2012-11-06 16:57 357 查看
(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+='<li>··· ···</li>';

                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+='<li>'+$(field).attr(options.warnAttr)+'</li>';

            }

        }

        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);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息