jQuery formValidator的一些验证实例

- 日理万妓 2022-08-04 05:06 110阅读 0赞

原文链接：http://www.cnblogs.com/talk/archive/2012/01/29/2330887.html

$(function(){
        try {
            $.formValidator.initConfig({
                formid: "formTable",
                errorfocus: false,
                submitonce: true,
                tipstyle: "both",
                onerror: function(){ // 验证不通过时的回调函数
                    alert("红色提示处输入非法，请根据提示修改！");
                }
            });
            //验证字符串(必填)
            $("#name").formValidator({ // 验证：模块名称
                onshow: "（必填）",
                onfocus: "（必填）不超过50个字符",
                oncorrect: "（正确）"
            }).inputValidator({
                min: 1,
                max: 50,
                onerrormin: "（错误）不能为空",
                onerrormax: "（错误）不超过50个字符，汉字算两个字符"
            });
    
            //验证字符串(选填)
            $("#name").formValidator({ // 验证：模块名称
                onshow: "（选填）",
                onfocus: "（选填）不超过50个字符",
                oncorrect: "（正确）",
                empty: true
            }).inputValidator({
                min: 1,
                max: 50,
                onerrormin: "（错误）不能为空",
                onerrormax: "（错误）不超过50个字符，汉字算两个字符"
            });
            
    
            //验证时间
            $("#addDate").formValidator({ // 验证：发送时间
                onshow: "（必填）",
                onfocus: "（必填）请选择操作时间",
                oncorrect: "（正确）"
            }).functionValidator({
                fun : function(val, elem){
                    if(!/^\d{4}-\d{2}-\d{2}[ ]\d{2}:\d{2}$/.test(val)){
                        return "（错误）请选择操作时间";
                    }
                    return true;
                }
            });
    
            //ajax验证
            $("#account").formValidator({ // 验证：模块名称
                onshow: "（必填）",
                onfocus: "（必填）不超过50个字符",
                oncorrect: "（正确）"
            }).inputValidator({
                min: 1,
                max: 50,
                onerrormin: "（错误）不能为空",
                onerrormax: "（错误）不超过50个字符，汉字算两个字符"
            }).ajaxValidator({
                type : "post",
                url  : "EnterpriseManage!ajaxValidatorUserAccount.action",
                success: function(data){
                    if(data == "0"){
                        return true;
                    }else if(data == "1"){
                        return false;
                    }
                },
                onerror: "该账号已被占用，请更换！"
            });
    
            //密码及重复密码验证
            $("#password").formValidator({ // 验证：模块名称
                onshow: "（必填）",
                onfocus: "（必填）不超过11个字符",
                oncorrect: "（正确）"
            }).inputValidator({
                min: 1,
                max: 50,
                onerrormin: "（错误）不能为空",
                onerrormax: "（错误）不超过11个字符，汉字算两个字符"
            });
    
            $("#passwordRepeat").formValidator({
                onshow: "（必填）",
                onfocus: "（必填）2次密码必须一致",
                oncorrect: "（正确）"
            }).compareValidator({
                desid: "password",
                operateor: "=",
                onerror: "（错误）2次密码不一致,请确认"
            });
    
            //图片格式验证
            $("#tcCodeLogo").formValidator({
                onshow: "（选填）",
                onfocus: "（选填）请上传图片文件",
                oncorrect: "（正确）",
                empty:true
            }).regexValidator({
                regexp: regexEnum.picture,
                onerror: "只能上传图片文件"
                });
    
            //数值验证
            $("#nameNum").formValidator({ // 验证：模块名称
                onshow: "（必填）",
                onfocus: "（必填）值1到50",
                oncorrect: "（正确）"
            }).inputValidator({
                min: 1,
                max: 50,
                type: "value",
                onerrormin: "（错误）不能为空",
                onerrormax: "（错误）值1到50"
            });
            //电话验证
            $("#linkPhone").formValidator({
                onshow: "（选填）",
                onfocus: "（选填）",
                oncorrect: "（正确）",
                empty: true
            }).regexValidator({
                regexp: "^(\\d{3,4}-?\\d{7,8}|(13|15|18)\\d{9})$",
                onerror: "（错误）电话号码格式不正确，请检查"
            });
    
            //EMail验证
            $("#linkEmail").formValidator({
                onshow: "（选填）",
                onfocus: "（选填）请选择正确EMail格式",
                oncorrect: "（正确）",
                empty: true
            }).regexValidator({
                regexp: regexEnum.email,
                onerror: "（错误）Email格式不正确，请检查"
            });
    
            //select验证
            $("#testSelect").formValidator({
                onshow: "（必填）",
                onfocus: "（必填）请选择选项",
                oncorrect: "（正确）"
            }).inputValidator({
                 min: 0,  //开始索引
                 onerror: "你是不是忘记选择学历了!"
             });
             
             //隐藏时，默认验证通过
             $("#smsProductName").formValidator({ // 验证
                    onshow: "（必填）",
                    onfocus: "（必填）不超过50个字符，汉字算两个字符",
                    oncorrect: "（正确）"
                }).functionValidator({
                    fun: function(val, elem) {
                        if($("#smsProductName").is(":hidden")){
                            return true;
                        }
                        if(!/^\S{1,50}$/.test(val)){
                            return "（错误）不超过50个字符，汉字算两个字符";
                        }
                        return true;
                    }
                });
            
            //多选选择框的验证方式 略有点复杂了
            $(":checkbox[name='productType']").formValidator({
                onshow: "（至少选择一个）",
                onfocus: "（至少选择一个）",
                oncorrect: "（正确）"
            }).functionValidator({
                fun: function(val, elem){
                    var objs = $(":checkbox[name='productType']");
                    for(var i=0; i<objs.length; i++){
                        if($(objs[i]).attr("checked") == true)
                        {
                            $('#productTypeTip').removeClass();
                            $('#productTypeTip').addClass("onSuccess");
                            $('#productTypeTip').html();
                            $('#productTypeTip').html("<nobr>正确</nobr>");
                            return true;
                        }
                    }
                    $('#productTypeTip').removeClass();
                    $('#productTypeTip').addClass("onError");
                    $('#productTypeTip').html();
                    $('#productTypeTip').html("<nobr>（至少选择一项）</nobr>");
                    return false;
                }
            });
            
        }catch(e){
            alert(e);
        }
    });