表单验证插件jQuery.validate 介绍+快速入门案例

由于项目需要，学习了jQuery.validate表单验证插件，这是一款很好用的插件，功能强大又简单，现在把学到的东西记录下来，方便以后回顾。

jQuery.validate简介

下边的介绍来自菜鸟教程
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。
该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。目前版本是 1.14.0。
访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件。
菜鸟教程提供的 1.14.0 版本下载地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip

jQuery.validate API

网上有很多中文API，看了之后感觉还是下边这个写的比较清楚，缺点是不能复制，不过手敲一遍印象更深刻吧~
API地址：
http://www.360doc.com/content/10/1220/16/2371584_79803527.shtml

项目实例

1,先看一个简单的验证例子：
注意下边的代码都要写在$(document).ready(){} 中

$("#Ins_ReportRevise_form").validate({  //在ID为Ins_ReportRevise_form的form表单中添加校验规则
            rules: {   //验证规则
                signature: {       //需要验证的表单的ID
                    required:true,      //验证是否必填
                },
                decision:{          //需要验证的表单的ID
                    required:true,   //验证是否必填
                                      //下边还可以根据需要，加上API中的email等属性来验证所填的值是否符合格式
                }
            },
            messages: {
                signature: {   //该id对应的表单的错误信息
                   required: 'Please complete the <b>Signature</b></br>.'
                 },
                decision:{   //该id对应的表单的错误信息
                    required:'Please complete the <b>Decision</b></br>.'
                }
            },  
           focusCleanup:true,//当表单获得焦点时清除错误信息
            errorElement:"label",  //插入的  包裹错误信息的  标签
            errorPlacement:function(error, element){ //出错的时候插入
                var a = $("#error");  //找到要插入的地方，这里是ID为error的元素a
                error.appendTo(a);     //将error出入a
            }

        });
        $("#page_submit").click(function(){   //page_submit是提交按钮，给他绑定函数
            $("#Ins_ReportRevise_form").submit();   //验证该ID的form表单，上边的所有需要验证的表单标签都要包含在这个form里边
            $(":input").blur();  //所有input元素失去焦点
        });      

2.下边再来一个较为复杂的例子：

首先，validate支持自定义校验规则。下面写一个在文本域内校验单个或多个email，不同的email之间用分号【；】间隔，结尾可以有分号【；】，也可以没有。同时忽略用户在输入过程中可能会误输入的 回车换行 和 空格。
注意下边这个函数最好单独写在一个js中引入页面，注意要在jQuery和validate之后引入。这样可以防止在页面中显示函数未定义的错误，并且这个定义不需要在$(document).ready(){} 里面。

jQuery.validator.addMethod("tech_email", function(value, element) { //创建一个名为tech_email的自定义校验规则，value为该元素的value值，element为该元素本身。
            var a = value.replace(/[ ]/g,"");//给value去掉空格
            var b = a.replace(/[\r\n]/g,"");//给value去掉回车换行  
            var reg = /^((([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6}\;))*(([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.;]{2,6})))$/;//一个复杂的正则表达式，上边需要的邮箱格式：单个或多个email，不同的email之间用分号【；】间隔，结尾可以有分号【；】，也可以没有。
            return this.optional(element) || ( reg.test(b)); 
        }, "Please confirm the email address is correct.");

下面来使用我们新建的校验规则：

$("#InspectorSendreport_form").validate({  //在ID为InspectorSendreport_form的form表单中添加校验规则
            rules: { 
                tech_email: {    //我们要验证的那个文本域的ID
                    required:$('#send_technologists').is(':checked'),   //当ID为send_technologists的选择框为选中状态的时候，该项是必填的。
                    tech_email: true   //验证格式，使用我们刚才创建的名为tech_email的自定义规则。这里是为了方面易懂，我把规则的名字和使用规则的文本域的ID设为一样的，其实可以不同，没区别。
                }
            },
            messages: {//错误信息
                 tech_email: {
                   required: 'Please confirm the email address of technologist is filled.'
                 }
            },  
            //下面是几个验证的参数设置，可以在API中查看，根据自己的需要进行使用。
            focusInvalid:false,//关闭  若验证失败，则失败的那个表单自动获得焦点
            onkeyup:false,  //关闭   敲击键盘时验证
            onclick:false,//关闭    点击时验证
            focusCleanup:true,//表单获得焦点时清除错误提示
            errorElement:"label",  //插入的  包裹错误信息的  标签
            errorPlacement:function(error, element){
                error.appendTo(element.parent().find($(".tip")));//将error插入该元素(element)的   父元素的   子元素中的   calss为tip的  元素中。
            }

        });
        $("#AuditSendReport").click(function(){  //给ID为AuditSendReport的提交按钮绑定click事件
            $("#InspectorSendreport_form").submit(); //验证该ID的form表单，上边的所有需要验证的表单标签都要包含在这个form里边
            $(":input").blur();  //所有input元素失去焦点。
        });      

其他技巧

1.动态增删校验规则：

//取消校验
$("#check_document").rules("remove");
$("#uncheck_document").rules("remove");
//增加校验规则（即可增加原有规则，如required；还可以增加自定义规则，如IfDocumentIsChecked）
$("#check_document").rules("add", { required: false,IfDocumentIsChecked: true, messages: { required: "",IfDocumentIsChecked:""} });
$("#uncheck_document").rules("add", { required: false,IfDocumentIsChecked: true, messages: { required: "",IfDocumentIsChecked:""} });

上边的两个例子，我都做了详尽的注释，基本上看一遍API，再过一遍例子，就能够很快学会这个表单验证插件了。以后需要的时候如果忘记了，再来回顾，也希望能帮到有需要的小伙伴们

(●’ω’●)丿❤