表单验证（jquery-validate）

1. 方法

1.1 使用方式

（1） 将校验规则写到控件中

验证规则直接写在标签里，需js调用 $("#formId").validate();

例如：<input id="cname"  minlength="2" maxlength="5" type="text" required>     最小2最大5必填

（2）将校验规则写到 js 代码中

直接在 $("#formId").validate({options}) 中配置校验规则

（3）meta String方式验证 

需先引入 jquery.metadata.js，在class属性中配置校验规则，js调用$("#formId").validate({meta: "validate"}); 

例如：<input class="{validate:{required: true, messages:{required:'提示信息'}}}"  type="text" > 

1.2 常用方法

方法	描述
$("#formId").validate({options})	配置验证相关配置，返回Validator对象
$("#inputId").rules(command, argument);	无参用于获取元素校验规则 动态添加移除验证，两个参数 第一个参数：方法名，添加?add? ? 移除?remove 第二个参数：rules验证规则，格式：{required:true,messages:{required:"提示信息"}}
$.validator.addMethod()	添加自定义验证方法，三个参数：         第一个参数：方法名         第二个参数：验证函数,function(value, element, param)输入值、验证元素、参数         第三个参数：错误信息
$.validator.setDefaults({}）	一个页面有多张表单，设置全局参数
$.validate.form()	验证form返回成功还是失败
$.validator.addClassRules(name,rules)	增加组合验证类型 在一个类里面用多种验证方法里比较有用
$.validator.addClassRules(rules)	增加组合验证类型 在一个类里面用多种验证方法里比较有用,这个是一下子加多个
$.validator.format("{n}")	用参数代替模板中的 {n}，参数为 验证方法参数，多个为[]

1.3 Validator对象方法

方法	描述
element(element)	验证单个元素是否验证通过
resetForm()	把前面验证的FORM恢复到验证前原来的状态
showErrors(errors)	显示特定的错误信息
form()	验证form返回成功还是失败

1.4 validate方法参数（json属性）

分类	参数	默认值或类型	描述
验证规则	rules	——	定义各文本框校验规则，格式 rules:{"文本框name属性值"{校验规则(可配置多个)}}
	messages	——	定义各文本框校验错误提示信息，格式 messages:{"文本框name属性值"{校验规则(可配置多个)}}
	groups	——	对一组元素的验证,用一个错误提示
验证的触发方式	onsubmit	true	提交时验证。设置为 false 就用其他方法去验证
	onfocusout	true	失去焦点时验证（不包括复选框/单选按钮）
	onkeyup	true	在 keyup 时验证
	onclick	true	在点击复选框和单选按钮时验证
	focusInvalid	true	提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点
	focusCleanup	false	如果是 true 那么当未通过验证的元素获得焦点时，移除错误提示。避免和 focusInvalid 一起用
其他	debug	false	表单不会提交，只进行检查
	ignore	元素选择器	忽略某些元素不验证
	meta	validate	设置meta String方式验证；需引入jquery.metadata.js 验证方式在class写验证规则：class="{validate:{ required:true,email:true }}"
事件函数	submitHandler	函数	表单提交时，将会触发这个函数，如果存在该函数，将会阻止表单提交
	invalidHandler	函数	如果表单验证不通过，将会触发这个函数
	showErrors	函数	跟一个函数,可以显示总共有多少个未通过验证的元素 获取方法： this.numberOfInvalids() 设置方法不会显示错误信息，可调用方法显示：this.defaultShowErrors()
	success	函数/string	要验证的元素通过验证后的动作,如果跟一个字符串,会当做一个css类,也可跟一个函数
	highlight	函数	可以给未通过验证的元素加效果,闪烁等
	unhighlight	函数	可以给未通过验证的元素不加效果,闪烁等
指定元素	errorPlacement	函数	设置错误信息位置， 参数：error, element ，第一个为错误元素，第二个为验证元素 默认：error.appendTo(element.parent()); 放在验证元素后面
	errorClass	“error”	指定错误提示的css类名,可以自定义错误提示的样式
	errorElement	“label”	使用什么标签标记错误
	wrapper	——	使用什么标签再把上边的errorELement包起来
	errorLabelContainer	元素选择器	把错误信息统一放在一个容器里面

1.5  remote用法

（1） remote:"url" 直接指定url，参数为当前 name 值

（2） remote:{}  指定json数据，指定相关配置

配置	描述
url	配置接口地址
type	配置请求类型
dataType	配置返回数据类型
data	参数，可配置多个，格式 ： name: function() {return $("#name").val();}

1.6 自定义选择器

选择器	描述
:blank	没有值的筛选器
:filled	有值的筛选器
:unchecked	没选择的元素的筛选器

2. 默认校验规则

属性	描述
required:true	必须输入的字段，除了Boolean，也可配置表达式或函数
remote:"/action"	使用ajax方法调用action验证输入值
email:true	必须输入正确格式的电子邮件
url:true	必须输入正确格式的网址
date:true	必须输入正确格式的日期。日期校验 ie6 出错，慎用
dateISO:true	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性
number:true	必须输入合法的数字（负数，小数）
digits:true	必须输入整数
creditcard:	必须输入合法的信用卡号
equalTo:"#field"	输入值必须和 #field 相同
accept:	输入拥有合法后缀名的字符串（上传文件的后缀）
maxlength:5	输入长度最多是 5 的字符串（汉字算一个字符）
minlength:10	输入长度最小是 10 的字符串（汉字算一个字符）
rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）
range:[5,10]	输入值必须介于 5 和 10 之间
max:5	输入值不能大于 5
min:10	输入值不能小于 10

3. 示例 

3.1 添加验证规则

$("#formId").validate({
            rules: {
                "name": {
                    required: true,
                    minlength: 1,
                    maxlength: 20,
                    remote: {
                        url: "url",
                        type: "post",
                        dataType: "json",
                        data: {
                            "name" : function() {
                                return $("#classname").val();
                            }
                        },
                        dataFilter: function(data, type) {
                            return $.validate.uniqueBoolean(data);
                        }
                    }
                }
            },
            messages: {
                "name": {
                    minlength: "至少1个字符",
                    maxlength: "最多20个字符",
                    remote:"name已存在"
                }
            }

3.2 添加自定义验证方法

$.validator.addMethod("chinese", function(value, element) {
    var chinese = /^[\u4e00-\u9fa5]+$/;
    return this.optional(element) || (chinese.test(value));
}, "只能输入中文");

3.3 含有多种提示语的自定义验证方法

  $.validator.addMethod("subdivisions",function(value,element,params){
            var msg=""
            var falg=false;
            if(value=="1"){
                msg="提示1"
            }else if(value=="2"){
                msg="提示2"
            }else{
                falg = true;
            }
            $.validator.messages.subdivisions = msg;
            return falg;
        }, $.validator.format("")  );

4. 扩展

4.1 采用中文提示

       引入  messages_zh.js，或将该js代码写入 jquery-validate.js 中

(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        define( ["jquery", "../jquery.validate"], factory );
    } else {
        factory( jQuery );
    }
}(function( $ ) {

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
 */
$.extend($.validator.messages, {
    required: "这是必填字段",
    remote: "请修正此字段",
    email: "请输入有效的电子邮件地址",
    url: "请输入有效的网址",
    date: "请输入有效的日期",
    dateISO: "请输入有效的日期 (YYYY-MM-DD)",
    number: "请输入有效的数字",
    digits: "只能输入数字",
    creditcard: "请输入有效的信用卡号码",
    equalTo: "你的输入不相同",
    extension: "请输入有效的后缀",
    maxlength: $.validator.format("最多可以输入 {0} 个字符"),
    minlength: $.validator.format("最少要输入 {0} 个字符"),
    rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
    range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
    max: $.validator.format("请输入不大于 {0} 的数值"),
    min: $.validator.format("请输入不小于 {0} 的数值")
});

}));

4.2 修改提示信息样式

        input.error { border: 1px solid red; }
        label.error {
            background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
            padding-left: 16px;
            padding-bottom: 2px;
            font-weight: bold;
            color: #EA5200;
        }
        label.checked {
            background:url("./demo/images/checked.gif") no-repeat 0px 0px;
        }