jquery.validate 表单验证

浏览数：143 / 时间：2015年06月09日

这个是我星期六的时候研究了一天的成果，虽然效率有点低吧，自学能力有点弱，不过自己还是很满意了吧，现在能自己套到程序中并成功运行，达到自己想要的效果

首先引用 Jquery Jquery.Vaildate

自定义方法，正则验证

            jQuery.validator.addMethod("isPhone", function(value, element) {
                var length = value.length;
                var mobile = /^[1][345789]\d{9}$/;
                return this.optional(element) || (length == 11 && mobile.test(value));
            }, "手机号码格式错误");
            jQuery.validator.addMethod("IsVaildPersonCard", function(value, element) {
                var length = value.length;
                var personCard = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
                return this.optional(element) || (length == 15 || length == 18 && personCard.test(value));
            }, "身份证格式错误");
            jQuery.validator.addMethod("isLoginName", function(value, element) {
                var length = value.length;
                var loginname = /^[a-zA-Z]{1}[a-zA-Z0-9_]{5,15}$/;
                return this.optional(element) || (5 < length < 16 && loginname.test(value));
            }, "登录名格式错误");

表单验证

 //通过id查找要进行校验的表单
            $("#regForm").validate({
                //设置校验触发的时机,默认全是true。不要尝试去设置它为true，可能会有js错误。
                //onsubmit:false,
                //onfocusout:true,
                //onkeyup:false,
                //onclick:false,

                //验证通过后执行的动作
                //success:function(label){
                //    label.text("ok!").addClass("success");
                //},
                //手动设置错误信息的显示方式
                errorPlacement: function(error, element) {
                    //error.appendTo(element.parent().next());
                    error.appendTo(element.next());
                    $(".yanzheng .error").css("color", "#dc143c");
                    if (element.is("#VerifyCode")) {
                        error.appendTo(element.next().next().next());
                        $(".yanzheng .error").css("color", "#dc143c");
                    }
                        
                    else if (element.is(":checkbox")) {
                        error.appendTo(element.siblings("span"));
                    }
                    //        else
                    //        error.appendTo( element.parent() );
                },
                rules: {
                    LoginName: {
                        required: true,
                        rangelength: [6, 15],
                        isLoginName: true,
                        remote: {
                            type: "post",
                            url: "/Account/ValidateLoginName",
                            data: {
                                username: function() {
                                    return $("#LoginName").val();
                                }
                            },
                            dataType: "html",
                            dataFilter: function(data, type) {
                                if (data == "True") {
                                    return true;
                                } else {
                                    return false;
                                }
                            }
                        }

                    },
                    UserPassword: {
                        required: true,
                        minlength: 6
                    },
                    RePassword: {
                        required: true,
                        minlength: 6,
                        equalTo: "#UserPassword"
                    },
                    EmailAddress: {
                        required: true,
                        email: true,
                        remote: {
                            type: "post",
                            url: "/Account/ValidateEmail",
                            data: {
                                username: function() {
                                    return $("#EmailAddress").val();
                                }
                            },
                            dataType: "html",
                            dataFilter: function(data, type) {
                                if (data == "True") {
                                    return true;
                                } else {
                                    return false;
                                }
                            }
                        }
                    },
                    MobilePhone: {
                        required: true,
                        digits: true,
                        rangelength: [11, 11],
                        isPhone: true,
                        remote: {
                            type: "post",
                            url: "/Account/ValidatePhone",
                            data: {
                                username: function() {
                                    return $("#MobilePhone").val();
                                }
                            },
                            dataType: "html",
                            dataFilter: function(data, type) {
                                if (data == "True") {
                                    return true;
                                } else {
                                    return false;
                                }
                            }
                        }
                    },
                    IdCard: {
                        required: true,
                        IsVaildPersonCard: true,
                        remote: {
                            type: "post",
                            url: "/Account/ValidateIdCard",
                            data: {
                                username: function() {
                                    return $("#IdCard").val();
                                }
                            },
                            dataType: "html",
                            dataFilter: function(data, type) {
                                if (data == "True") {
                                    return true;
                                } else {
                                    return false;
                                }
                            }
                        }
                    },
                    DriverLicense: {
                        required: true
                    },
                    VerifyCode: {
                        required: true,
                        rangelength: [5, 5],
                        remote: {
                            type: "post",
                            url: "/Account/ValidateVerifyCodeSupplier",
                            data: {
                                username: function () {
                                    return $("#VerifyCode").val();
                                }
                            },
                            dataType: "html",
                            dataFilter: function (data, type) {
                                if (data == "True") {
                                    return true;
                                } else {
                                    return false;
                                }
                            }
                        }
                    },
                    reg_agreement: "required",
                },
                //校验提示信息
                messages:
                {
                    LoginName: {
                        required: "请输入用户名",
                        rangelength:
                            "长度必须为{0}到{1}个字符",
                        isLoginName: "请输入合法的登录名",
                        remote: "该用户名已存在"
                    },
                    UserPassword: {
                        required: "请输入密码",
                        minlength:
                            "密码至少是{0}个字符"
                    },
                    RePassword: {
                        required: "请输入确认密码",
                        minlength:
                            "确认密码至少是{0}个字符",
                        equalTo:
                            "确认密码与密码不相等"
                    },
                    EmailAddress: {
                        required: "请输入邮箱",
                        email: "请输入正确的邮箱格式",
                        remote: "该邮箱已注册"
                    },
                    MobilePhone: {
                        required: "请输入手机号",
                        digits: "请输入正确的手机号",
                        rangelength: "请输入正确的手机号",
                        IsPhone: "请输入一个有效的联系电话",
                        remote: "该手机号已注册"
                    },
                    IdCard: {
                        required: "请输入身份证号",
                        remote: " 该身份证号已被注册"
                    },
                    DriverLicense: {
                        required: "请输入驾驶证号",
                        IsVaildPersonCard: "请输入合法的身份证号"
                    },
                    VerifyCode: {
                        required:"请输入验证码",
                        rangelength: "请输入正确的验证码",
                        remote:"输入验证码有误"
                    }, 
                    reg_agreement: "您没有同意使用协议",
                }
            });

后台异步验证

               remote: {
                            type: "post",
                            url: "/Account/ValidateVerifyCodeSupplier",
                            data: {
                                username: function () {
                                    return $("#VerifyCode").val();
                                }
                            },
                            dataType: "html",
                            dataFilter: function (data, type) {
                                if (data == "True") {
                                    return true;
                                } else {
                                    return false;
                                }
                            }
                        }