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  官网地址