validate表單驗證

validate使用步驟:
1.導入jquery.js
2.導入validate.js
3.在頁面加載成功以後 對錶單進行校驗  $("選擇器").validate()
4.在validate中編寫校驗規則
$("選擇器").validate({
rules:{},
messages:{}
});

4.1 這裏rules的{} 裏寫的就是具體的規範，要作什麼約束

4.2messages的{}裏寫的就是違背給出的提示信息

####rules{}內的格式:
格式1:
字段的name屬性:"校驗器"
格式2:
字段的name屬性:{校驗器:值,校驗器:值}

其中：格式1是一個輸入框只有一個校驗器的時候使用

而格式2是一個輸入框須要有多個校驗器的時候使用

####messages{}內的格式跟rules相似

messages的格式:
格式1:
字段的name屬性:"提示信息"
格式2:
字段的name屬性:{校驗器:"提示信息",校驗器:提示信息"}

$("#register").validate($.extend({
　　　　　　　// 這裏寫的就是具體的規範,要作什麼約束
            rules: { // 放回元素的驗證規則
                username: { // input的name 名稱
                    required: true, // 必須輸入的字段
                    firstLetter: true, // 調用的下邊代碼裏的 firstLetter true爲開啓
                    usernameFormat: true, // 調用下邊代碼裏的
                    rangelength: [6,15], //輸入長度必須介於 [最小值,最大值]之間
　　　　　　　　　　　　// remote 至關於 $.ajax
                    remote: {
                        url: "${createLink(controller: 'mobileMain',action: 'checkUsernameExists')}",
                        type: "post",
                        data: {
                            username: function(){
                                return $("input[name='username']").val();
                            }
                        }
                    }
                },
                password: {
                    required: true,
                    rangelength: [6,16]
                },
                passwordRepeat: {
                    required: true,
                    equalTo: "input[name='password']"
                },
                telephone: {
                    required: true,
                    telephoneFormat: true,
                    remote: {
                        url: "${createLink(controller: 'mobileMain',action:'checkTelephoneExists2')}",
                        type: "post",
                        data: {
                            telephone: function(){
                                return $("input[name='telephone']").val();
                            }
                        }
                    }
                },
                captcha: {
                    required: true,
                    remote: {
                        url: "${createLink(controller: 'mobileMain',action: 'checkCaptcha')}",
                        type: "post",
                        data: {
                            captcha: function(){
                                return $("input[name='captcha']").val()
                            }
                        }
                    }
                },
                telCaptcha: {
                    required: true,
                    remote: {
                        url: "${createLink(controller: 'mobileMain',action: 'checkTelCaptcha')}",
                        type: "post",
                        data: {
                            telephone: function(){
                                return $("input[name='telephone']").val();
                            },
                            captcha: function(){
                                return $("input[name='telCaptcha']").val()
                            }
                        }
                    }
                },
                invitationCode: {
                    remote: {
                        url: "${createLink(controller: 'mobileMain',action: 'checkInvitationCode')}",
                        type: "post",
                        data: {
                            invitationCode: function(){
                                return $("input[name='invitationCode']").val();
                            }
                        }
                    }
                }
            },
　　　　　　　// 錯誤給出的提示語
            messages:{
                username: { // 這個名字要和上邊的名字對應
                    required: "用戶名不能爲空",
                    rangelength: "用戶名需爲6-15位字符",
                    remote: "用戶名已存在"
                },
                password: {
                    required: "密碼不能爲空",
                    rangelength: "密碼需爲6-16位字符"
                },
                passwordRepeat: {
                    required: "確認密碼不能爲空",
                    equalTo: "確認密碼不一致"
                },
                telephone: {
                    required: "手機號碼不能爲空",
                    remote: "該手機號碼已被註冊"
                },
                captcha: {
                    required: "圖片驗證碼不能爲空",
                    remote: "圖片驗證碼不正確"
                },
                telCaptcha: {
                    required: "手機驗證碼不能爲空",
                    remote: "手機驗證碼不正確"
                },
                invitationCode:{
                    remote: "無效的邀請碼"
                }
            }
        }, {
　　　　　　　//  錯誤是顯示
            errorPlacement:function(error, element){  // error 提示語  element 選擇器
                if(!error[0].innerHTML){
                    return
                }
                $(element).nextAll(".inputinfo").children().attr("src", "${application.contextPath}/assets/img/reg/inputerror.gif")
                $(element).nextAll(".errorinfo").html(error[0].innerHTML)
                config.afterValidateError(element[0])
            },
　　　　　　　// 成功後顯示
            success: function(obj, element){
                $(element).nextAll(".inputinfo").children().attr("src", "${application.contextPath}/assets/img/reg/inputok.gif")
                $(element).nextAll(".errorinfo").html("")
                config.afterValidateSuccess(element)
            },
            onkeyup: false
        }));

 

jquery.validator.addMethod方法的使用
　　addMethod(name,method,message),$.validator.format(string)方法
參數: name 是添加的方法的名字
　　　method 是一個函數,接受三個參數(value,element,param)
　　　　　　　　value 元素的值  element 是元素自己 param 是參數
　　　　　　　　param 要爲此方法顯示的默認消息,能夠 jquery.validator.format(value) 建立的函數.未定義時,使用默認消息,不然必須定義(字符串)消息
format(string) 是要返回的字符串

要爲此方法顯示的默認消息。能夠是''jQuery.validator.format（value）''建立的函數。未定義時，使用現有消息（便於本地化），不然必須定義特定於字段的消息。
這段代碼和上邊代碼 是一體的  firstLetter 上邊有調用
$.validator.addMethod("firstLetter", function (value, element, param) {
            return this.optional(element) || /^[a-zA-Z]/.test(value)
        }, $.validator.format("首位必須字母"))

        $.validator.addMethod("usernameFormat", function (value, element, param) {
            return this.optional(element) || /^[a-zA-Z]+([a-zA-Z0-9|_|-]*$)/.test(value)
        }, $.validator.format("可以使用字母、數字、橫線、下劃線"))

        $.validator.addMethod("telephoneFormat", function (value, element, param) {
            return this.optional(element) || /^[1][3,4,5,7,8][0-9]{9}$/.test(value)
            return this.optional(element) || /^[1][1,3,4,5,7,8][0-9]{9}$/.test(value)
        }, $.validator.format("手機號碼格式不正確"))

 

 

校驗類型	取值	描述
required	true|false	必填字段
email	「@」或者」email」	郵件地址
url		路徑
date	數字	日期
dateISO	字符串	日期（YYYY-MM-dd）
number		數字（負數，小數）
digits		整數
minlength	數字	最小長度
maxlength	數字	最大長度
rangelength	[minL,maxL]	長度範圍
min		最小值
max		最大值
range	[min,max]	值範圍
equalTo	jQuery表達式	兩個值相同
remote	url路徑	ajax校驗

 http://www.runoob.com/jquery/jquery-plugin-validate.html  官網地址