一個比較完善表單校驗插件

(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);
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章