jQuery Validate插件 && 表单验证演示
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。
jQuery Validate插件
导入
说明：注意文件引入顺序：在使用jQuery插件时，一定先引入jQuery文件，再引入其他插件文件。
页面准备
html部分源代码：
注意这里一定要设置name和id属性值，因为后面进行验证的时候，IE浏览器会通过id值进行验证，而其他所有浏览器都以name值进行验证，所以这里需要把id值和name值设置成一样。还有后面三个复选框一定要用一个容器给包起来，我这里用了div，因为后面会进行设置提示信息，而提示信息的位置会在标签的后面，而如果不把这三个复选框包起来的话，提示信息就会出现在第一个复选框的后面。
校验方式
var result; //因为后面两个函数都会用到，所以设置为全局变量
$(function(){
// 返回值result.form()为true 说明验证通过，可以提交
//myForm是from表单的id，result是用来接收结果，其他的为固定格式
result = $('#myForm').validate({
//1 指定标签的验证规则（对哪个表单项，进行什么样的校验）
//2指定验证不能通过时的提示信息
//3 指定提示信息显示的位置
});
});
//这个函数是定义在提交按钮上的
function subForm(){
if(result.form()){
return true; // 提交
}else{
return false;
}
}我们可以看到上面有三个步骤，我们进行验证的时候就需要用到这三个部分的功能。
我们将三个功能，从上往下讲解：
首先，我们可以去validate.js中查看（可以Ctrl+f 搜索message来进行获取）：
这里前面的红框1，就是进行校验的关键字，而后面的就是如果出错的话的提示信息：
写到这里，可以先把所有源代码给出(记得看注释，注释很重要）：
通过上面的代码，我们可以很精确的进行位置的排布，和提示信息的输出。
我们可以发现，类似必填项，我们可以直接提示 “必填” 而不用设置的那么精确，用户依然会明白什么意思。所以，我们可以进行简略格式。
自定义提示信息文件
新建一个js文件，文件名自定义：我这里叫 ：message_cn.js
内容：
jQuery.extend(jQuery.validator.messages,{
required: "必填",
email: "邮箱格式错误",
number: "请输入一个数字",
equalTo: "两次密码不一致",
maxlength: $.validator.format( "最大长度为{0}" ),
minlength: $.validator.format( "最小长度为{0}" ),
rangelength: $.validator.format( "输入长度应在{0}~{1}之间" ),
range: $.validator.format( "输入范围在{0}~{1}之间" ),
})这里的第一行是固定格式，里面的内容是进行覆盖上面那张图片也就是validate插件里面的内容的。
这里可以解锁上面源代码中第10行代码的注释（该引入文件为上面的js文件）。
然后把后面的第二步的message全都给注释起来了。
随之我们会看到第九行的注释，然后我们还可以发现，我们下面进行对phone的验证的时候，用了一个phone的验证，但是我们validate插件中并没有phone关键字的验证，这是因为，电话号码大多数国家格式都是不一样的，所以没有进行整合到上面，所以，这也就提供了一个开放性的可以自定义验证的条件：
自定义验证规则
还是需要编写一个js文件：名字可自定义，我这里是test_phone.js 一般多写成 add_method.js
jQuery.validator.addMethod("phone",function(value,element){
var phoneRex = /^1[3456789]\d{9}$/;
if(phoneRex.test(value) || this.optional(element)){
return true;
}
},"请输入正确的手机号")这里的第一行，除了phone是自己定义的验证规则关键字外，其他的都是固定格式：
addMethod(参数1：验证规则关键字，参数2：验证函数 ，参数3：错误提示信息）
验证函数中第一行为验证电话号码的正则表达式，后面两个选项一个是验证正则表达式，另一个的作用是，输入框为空时也会返回true
否则，空字符串是不符合正则的，如果这一项为非必填项，那么空的字符串将永远无法完成验证，也就一直提交不了。
这时可以解开对phone的验证的注释
自定义提示信息样式
我们想到，既然是错误提示信息，那么提示信息应该是红色或者其他样式，那么我们怎么来设置提示信息的样式呢。
这里需要一个CSS样式文件。内容为规定的格式（可以自己创建，名字为jquery.validate.css 或者可以下载：）：
label.error {
color: red;
font-size:11px;
background: transparent url(image/unchecked.gif) no-repeat scroll 0 0;
}
label.checked {
background: transparent url(image/checked.gif) no-repeat scroll 0 0;
}然后再导入：（源代码第6行代码）
至此，我们可以进行自定义验证规则，自定义样式，自定义提示信息。
重要文件有：
最终源码：
html:
jquery.validate.css
label.error {
color: red;
font-size:11px;
background: transparent url(image/unchecked.gif) no-repeat scroll 0 0;
}
label.checked {
background: transparent url(image/checked.gif) no-repeat scroll 0 0;
}message_cn.js
jQuery.extend(jQuery.validator.messages,{
required: "必填",
email: "邮箱格式错误",
number: "请输入一个数字",
equalTo: "两次密码不一致",
maxlength: $.validator.format( "最大长度为{0}" ),
minlength: $.validator.format( "最小长度为{0}" ),
rangelength: $.validator.format( "输入长度应在{0}~{1}之间" ),
range: $.validator.format( "输入范围在{0}~{1}之间" ),
})test_phone.js
jQuery.validator.addMethod("phone",function(value,element){
var phoneRex = /^1[3456789]\d{9}$/;
if(phoneRex.test(value) || this.optional(element)){
return true;
}
},"请输入正确的手机号")