+ -
当前位置:首页 → 问答吧 → 新手写的插件,大家帮忙指点下吧

新手写的插件,大家帮忙指点下吧

时间:2009-06-24

来源:互联网

本人前天晚上开始学jquery,学习的方式就是不停的查Api和到本版咨询。
为了演练选择器及其他相关的用法,写了个轻量级表单验证插件:
请jquery高手帮忙指点或优化下。

使用如下:
<script language="javascript">
$(function(){    
    $(":text[name='username']").check("chn","必须填写中文!");
    $(":text[name='english']").check("eng","必须填写e文!",false);
    $(":text[name='ok.number']").check("eq,eng","值为英文且等于english文本框值",true,$(":text[name='english']").val());    
    $(":input[name='selectname']").check("rq","没有选择");
    $(":radio[name='radioname']").check("rq","没有选择");
    $(":checkbox[name='box']").check("rq","没有选择");
    $("form[name='form1']").check();
})
</script>
参数说明:
$(":text[name='username']") 表单对象名
chek() 函数
第一个参数为验证类型(多重验证用,号隔开),
第二个参数为提醒信息
第三个参数为是否必填,可选,无值即为必填
第四个参数为参考值,可选,用来进行对比

默认验证事件为blur和submit

经多次测试,暂没发现bug
未加入ajax验证



插件代码如下:

//表单验证 2009.6

;(function($){
    $.fn.extend({

    "items":[],

    "getVal":function(){        
        var fval = "";
        if ($(this).length>1){
            $.each($(this),function(){
                if ($(this).is(":checked")) {
                    fval = $(this).val();
                    return false;
                }
            });
        }else{
            fval = $(this).val();
        }
        return $.trim(fval);
    },

    "test":function(typeArg,matchVal){

        var fval = $(this).getVal();
        var rule = {
            "rq" : /.+/,
            "eng" : /^[A-Za-z]+$/,
            "chn" :/^[\u0391-\uFFE5]+$/,
            "mail" : /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
            "url" : /^http[s]?:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
            "currency" : /^\d+(\.\d+)?$/,
            "number" : /^\d+$/,
            "int" : /^[0-9]{1,30}$/,
            "double" : /^[-\+]?\d+(\.\d+)?$/,
            "username" : /[0-9a-zA-Z]{3,20}/,
            "safe" : /^(\w){6,20}$/,
            "QQ" : /[1-9][0-9]{4,}/,
            "date" : /^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/,
            "year" : /^(19|20)[0-9]{2}$/,
            "month" : /^(0?[1-9]|1[0-2])$/,
            "day" : /^((0?[1-9])|((1|2)[0-9])|30|31)$/,
            "hour" : /^((0?[1-9])|((1|2)[0-3]))$/,
            "minute" : /^((0?[1-9])|((1|5)[0-9]))$/,        
            "mobile" : /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/,
            "phone" : /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,    
            "zipcode" : /^[1-9]\d{5}$/,
            "bodycard" : /^((1[1-5])|(2[1-3])|(3[1-7])|(4[1-6])|(5[0-4])|(6[1-5])|71|(8[12])|91)\d{4}((19\d{2}(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(19\d{2}(0[13578]|1[02])31)|(19\d{2}02(0[1-9]|1\d|2[0-8]))|(19([13579][26]|[2468][048]|0[48])0229))\d{3}(\d|X|x)?$/,
            "IP" : /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,        
            "file": /^[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/,
            "image" : /.+\.(jpg|gif|png|bmp)$/i,
            "word" : /.+\.(doc|rtf)$/i,
            
            "eq": function(arg1,arg2){ return (arg1==arg2) ? true:false;},
            "gt": function(arg1,arg2){ return (arg1>arg2) ? true:false;},
            "ge": function(arg1,arg2){ return (arg1>=arg2) ? true:false;},
            "lt": function(arg1,arg2){ return (arg1<arg2) ? true:false;},
            "lq": function(arg1,arg2){ return (arg1<=arg2) ? true:false;},
            "title": function(arg1) {
                var sl = arg1.match(/[^ -~]/g) == null ? arg1.length : arg1.length + arg1.match(/[^ -~]/g).length;
                return sl<=0 || sl>255 ? false:true;
            }
        }
        
        var checkType = function(type){
            var objType = eval( "rule." + type);
            if ($.isFunction(objType)) {
                if(arguments.length = 2 && matchVal!="" && matchVal!=undefined){
                    return eval( "rule."+type+"('"+fval+"','"+matchVal+"')");
                }else{
                    return eval( "rule."+type+"('"+fval+"')");
                }
            }else{
                return objType.test(fval);
            }
        }

        var result = true;
        $.each(typeArg.split(","),function(){
            if (checkType(this)==false){
                result = false;
                return false;
            }        
        });
        return result;
    },

    "showTip":function(type,msg,matchVal){

        var tipName = "info_" + $(this).attr("name").replace(/[^\da-zA-Z\-]/g,"");
        $(this).parent().find("#"+tipName).remove();
        
        if($(this).test(type,matchVal)) {
            $(this).css("background","#DCFFDD");        
            $(this).eq($(this).length-1).after("<span id='"+tipName+"'style='color:green'><img src='check_right2.gif'/>检测通过!</span>");
            
        }else{
            $(this).css("background","#FFDFDD");        
            $(this).eq($(this).length-1).after("<span id='"+tipName+"'style='color:red'><img src='check_error2.gif'/>"+msg+"</span>");
        }
    
    },
    "removeTip":function(){
        var tipName = "info_" + $(this).attr("name").replace(/[^\da-zA-Z\-]/g,"");
        $(this).parent().find("#"+tipName).remove();
        $(this).css("background","");
    },
    
    "check":function(type,msg,isrq,matchVal){

        if( $(this).is(":input") && type!= undefined && msg!= undefined ){            

            var rq = true, mv = "",objs = $(this);
            if(isrq != undefined && isrq == false )  rq= false;    
            if(matchVal != undefined && matchVal != "")  mv = matchVal;
            
            $(this).blur(function(){
                if ( rq == true || (rq == false && objs.getVal() != "")) {
                    objs.showTip(type,msg,mv);
                }else{
                    objs.removeTip();
                }
            });

            $(this).items.push([$(this),type,msg,rq,mv]);
            
        } else if ($(this).is("form")){
            
            $(this).submit(function(){    
                return $(this).valid();
            });
        }
    },

    "valid":function(){
        var result = true;

        $.each($(this).items,function(){
            if( ! $(this)[0].test($(this)[1],$(this)[4]) && $(this)[3]){
            result = false;
            return false;
            }
        });

        if (result) {
            return true;
            
        }else{
            var tipinfo = "";

            $.each($(this).items,function(){

                if($(this)[3] || (! $(this)[3] && $(this)[0].getVal() != "")) {
                    $(this)[0].showTip($(this)[1],$(this)[2],$(this)[4]);
                    if(! $(this)[0].test($(this)[1],$(this)[4])) tipinfo += "·"+$(this)[2]+"\n";
                }

            });

            alert("表单有误!请正确填写相关内容。\n\n"+ tipinfo);
            return false;
        }
    }

    });
})(jQuery);

作者: janchie   发布时间: 2009-06-24

我先收藏。最近我也刚写了个小验证函数。只是里面的结构太乱了。

作者: czcz   发布时间: 2009-07-21

热门下载

更多