jquery.validate 表單驗證

這個是我星期六的時候研究了一天的成果，雖然效率有點低吧，自學能力有點弱，不過本身仍是很滿意了吧，如今能本身套到程序中併成功運行，達到本身想要的效果

首先引用 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));
            }, "登陸名格式錯誤");

多重驗證

    jQuery.validator.addMethod("isLoginName", function (value, element) {
            var length = value.length;
            var mobile = /^[1][345789]\d{9}$/;
            var loginname = /^[a-zA-Z]{1}[a-zA-Z0-9_]{5,15}$/;
            var email = /^([\w-\.]+)@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
            return this.optional(element)||(mobile.test(value))||(loginname.test(value))||(email.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;
                                }
                            }
                        }

 多重驗證

      jQuery.validator.addMethod("isLoginName", function(value, element) {
            var length = value.length;
            var mobile = /^[1][345789]\d{9}$/;
            var loginname = /^[a-zA-Z]{1}[a-zA-Z0-9_]{5,15}$/;
            var email = /^([\w-\.]+)@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
            var idCard = /^[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) || (mobile.test(value)) || (loginname.test(value)) || (email.test(value)||(idCard.test(value)));
        }, "登陸帳號格式錯誤");