一、validate
1.官方网站：http://jqueryvalidation.org/
2.文档说明：http://jqueryvalidation.org/documentation/
3.js文件下载：官方网站首页，提供一个最新版本的链接
二、验证表单的一般步骤
1.准备好从JQuery官方网站下载JQuery.js文件和validate官网下载的jquery.validte.js文件
注意事项：validate并不支持所有版本的JQuery，支持的版本目前有：JQuery-1.7.2,1.8.3,1.9.1,1.11.1，该信息可以从官网首页Required字段查找到。
2.在网页代码中引入两个文件（不要使用自带的JQuery.js文件，该文件在之前的版本中使用比较方便，但是最新版本的JQuery.js文件里面没有任何实质性的内容，最后还是引入了外部的js文件，大多会使用JQuery-1.11.1.js文件，所以最好直接使用该js文件）。
3.调用验证的方法
$("#empForm").validate(
{
//自定义规则
rules:{
},
//自定义提示信息
messages:{
}
}
);
三、validate的系统规则详情（可参考官网doc）
1.英文原版
- required
- remote
- minlength
- maxlength
- rangelength
- min
- max
- range
- url
- date
- dateISO
- number
- digits
- creditcard
- equalTo
2.中文版
（1）required：true，必须字段
（2）remote:"check.jsp"，使用ajax方法调用check.jsp验证输入
（3）email:true，必须输入正确格式的电子邮件
（4）url:true，必须输入正确格式的网址
（5）date:true,必须输入正确格式的日期
（6）dateISO:必须输入正确格式的日期(ISO)，例如：2009-1-1，1009/1/1，只验证格式，不验证有效性
（7）number:true,必须输入合法的数字
（8）digits:true，必须输入整数
（9）creditcard:true，必须输入合法的信用卡号
（10）equalTo:"#filed"，输入的值必须和filed的值相同
（11）accept:输入拥有合法后缀名的字符串
（12）maxlength:5，输入长度最多是5的字符串（汉字算一个字符）
（13）minlength:10，输入长度最多是最小是10的字符串（汉字算一个字符）
（14）rangelength:[5,10]，输入长度必须在5到10之间的字符串，汉字算一个字符。
（15）range:[5,10]，输入的值必须在5到10之间
（16）max:5,输入的值最大不能大到5
（17）min:5，输入的值最小不能小于5
3.使用样例
rules:{
realname:{
required:true
},
username:{
required:true,
rangelength:[5,8]
},
psw:{
required:true,
rangelength:[6,12]
},
psw2:{
required:true,
rangelength:[6,12],
equalTo:"#psw"
},
gender:{
required:true
},
age:{
required:true,
range:[26,50]
},
edu:{
required:true
},
birthday:{
required:true,
dateISO:true
},
checkbox1:{
required:true
},
email:{
required:true,
email:true
},
cart:{
required:true,
checkIdLength:true,
checkId:true
}
},
四、提示信息messages的写法
写法格式和rules相同，但是在每个方法之后需要写上字符串，用于提示信息用。
例：
messages:{
realname:{
required:"真实姓名不能为空！"
},
username:{
required:"登录名不能为空！",
rangelength:"登录名长度应当在5-8之间"
},
psw:{
required:"密码不能为空！",
rangelength:"密码长度为6-12！"
},
psw2:{
required:"请再次输入密码！",
rangelength:"密码长度为6-12！",
equalTo:"两次输入的密码不一致！"
},
gender:{
required:"性别必须进行选择！"
},
age:{
required:"年龄不能为空！",
range:"年龄范围应在26-50之间！"
},
edu:{
required:"请选择学历信息！",
},
birthday:{
required:"请输入日期信息！",
dateISO:"请输入正确格式的日期！"
},
checkbox1:{
required:"请至少选择一个兴趣爱好！"
},
email:{
required:"电子邮箱不能为空！",
email:"请输入正确的电子邮箱！"
},
cart:{
required:"身份证号码不能为空！",
checkIdLength:"身份证号码长度应为15或者18",
checkId:"身份证号码不合法！"
}
}
}
五、自定义规则
1.流程
（1）在定义校验规则之前先定义一个方法用于执行校验规则的逻辑
（2）在rules中指定某个域使用该校验
（3）在messages中指定这个域使用此校验规则没有通过的提示信息
2.自定义校验规则的格式
$.validator.addMethod("规则名称，如required",function(value,element,params)
{
//value是元素的值,如text格式的input元素value值
//element是元素本身，如Input
//params是指在rules中设置的参数
},"错误提示信息");
3.示例：
（1）定义方法
$.validator.addMethod("checkIdLength",function(value,element,params){
if(value.length!=15&&value.length!=18)
return false;
return true;
},"长度错误！");
（2）rules中指定某个域使用该校验
cart:{
required:true,
checkIdLength:true
}
（3）在messages中定义错误提示信息
cart:{
required:"身份证号码不能为空！",
checkIdLength:"身份证号码长度应为15或者18"
}
六、综合练习
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>jQuery validation plug-in - main demo</title>
5 <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
6 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
7 <script type="text/javascript" src="js/jquery.validate.js"></script>
8 <script type="text/javascript">
9 /*********************************************************************************************************/
10
11 </script>
12 </head>
13 <body>
14 <p>员工信息录入</p>
15 <form name="empForm" id="empForm" method="post" action="test.html">
16 <table border=1>
17 <tr>
18 <td><label for="realname">真实姓名(不能为空 ,没有其他要求)</label></td>
19 <td><input type="text" id="realname" name="realname" />
20 </td>
21 </tr>
22 <tr>
23 <td>
24 <label for="username">登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</label>
25 </td>
26 <td><input type="text" id="username" name="username" /></td>
27 </tr>
28 <tr>
29 <td>
30 <label for="psw">密码(不能为空,长度6-12字符或数字,不能包含中文字符):</label>
31 </td>
32 <td><input type="password" id="psw" name="psw" style="width:120px" /></td>
33 </tr>
34 <tr>
35 <td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
36 <td><input type="password" id="psw2" name="psw2" style="width:120px" /></td>
37 </tr>
38 <!--
39
40
41 -->
42 <tr>
43 <td>性别(必选其一)</td>
44 <td>
45 <input type="radio" id="gender_male" value="m" name="gender"/>男
46 <input type="radio" id="gender_female" value="f" name="gender"/>女
47 <label style="display: none" for="gender" class="error">请选择性别</label>
48 </td>
49 </tr>
50 <tr>
51 <td>年龄(必填26-50):</td>
52 <td><input type="text" id="age" name="age" /></td>
53 </tr>
54
55 <tr>
56 <td>你的学历:</td>
57 <td> <select name="edu" id="edu">
58 <option value="">－－请选择你的学历－－</option>
59 <option value="a">专科</option>
60 <option value="b">本科</option>
61 <option value="c">研究生</option>
62 <option value="e">硕士</option>
63 <option value="d">博士</option>
64 </select>
65 </td>
66 </tr>
67
68 <tr>
69 <td>出生日期(1982/09/21):</td>
70 <td><input type="text" id="birthday" name="birthday" style="width:120px" value="" /></td>
71 </tr>
72
73 <tr>
74 <td>兴趣爱好:</td>
75 <td colspan="2">
76 <input type="checkbox" name="checkbox1" id="qq1"/>乒乓球
77 <input type="checkbox" name="checkbox1" id="qq2" value="1" />羽毛球
78 <input type="checkbox" name="checkbox1" id="qq3" value="2" />上网
79 <input type="checkbox" name="checkbox1" id="qq4" value="3" />旅游
80 <input type="checkbox" name="checkbox1" id="qq5" value="4" />购物
81 <label style="display: none" for="checkbox1" class="error">您的兴趣爱好,至少选择一个</label>
82 </td>
83 </tr>
84 <tr>
85 <td align="left">电子邮箱:</td>
86 <td><input type="text" id="email" style="width:120px" name="email" /></td>
87 </tr>
88 <tr>
89 <td align="left">身份证(15-18):</td>
90 <td><input type="text" id="cart" style="width:200px" name="cart" /></td>
91 </tr>
92 <tr>
93 <td></td>
94 <td></td>
95 <td><input type="submit" name="firstname" id="firstname" value="保存"></td>
96 </tr>
97 </table>
98
99 </form>
100 <script type="text/javascript">
101 $.validator.addMethod("checkIdLength",function(value,element,params){
102 if(value.length!=15&&value.length!=18)
103 return false;
104 return true;
105 },"长度错误！");
106 $.validator.addMethod("checkId",function(value,element,params){
107 if(value.length==15){
108 //正则表达式不能带上引号
109 var pattern=/^\d{15}$/;
110 //alert("长度为15！");
111 var result=pattern.test(value);
112 return result;
113 }
114 if(value.length==18){
115 var pattern=/^\d{18}|\d{17}[X|x]$/;
116 var result=pattern.test(value);
117 return result;
118 }
119 return false;
120 });
121 </script>
122 <script type="text/javascript">
123 /* $(document).ready(function(){
124 alert("开始加载页面！");
125 }); */
126 $("#empForm").validate({
127 //定义规则
128 rules:{
129 realname:{
130 required:true
131 },
132 username:{
133 required:true,
134 rangelength:[5,8]
135 },
136 psw:{
137 required:true,
138 rangelength:[6,12]
139 },
140 psw2:{
141 required:true,
142 rangelength:[6,12],
143 equalTo:"#psw"
144 },
145 gender:{
146 required:true
147 },
148 age:{
149 required:true,
150 range:[26,50]
151 },
152 edu:{
153 required:true
154 },
155 birthday:{
156 required:true,
157 dateISO:true
158 },
159 checkbox1:{
160 required:true
161 },
162 email:{
163 required:true,
164 email:true
165 },
166 cart:{
167 required:true,
168 checkIdLength:true,
169 checkId:true
170 }
171 },
172 //定义犯错的时候使用的提示信息
173 messages:{
174 realname:{
175 required:"真实姓名不能为空！"
176 },
177 username:{
178 required:"登录名不能为空！",
179 rangelength:"登录名长度应当在5-8之间"
180 },
181 psw:{
182 required:"密码不能为空！",
183 rangelength:"密码长度为6-12！"
184 },
185 psw2:{
186 required:"请再次输入密码！",
187 rangelength:"密码长度为6-12！",
188 equalTo:"两次输入的密码不一致！"
189 },
190 gender:{
191 required:"性别必须进行选择！"
192 },
193 age:{
194 required:"年龄不能为空！",
195 range:"年龄范围应在26-50之间！"
196 },
197 edu:{
198 required:"请选择学历信息！",
199 },
200 birthday:{
201 required:"请输入日期信息！",
202 dateISO:"请输入正确格式的日期！"
203 },
204 checkbox1:{
205 required:"请至少选择一个兴趣爱好！"
206 },
207 email:{
208 required:"电子邮箱不能为空！",
209 email:"请输入正确的电子邮箱！"
210 },
211 cart:{
212 required:"身份证号码不能为空！",
213 checkIdLength:"身份证号码长度应为15或者18",
214 checkId:"身份证号码不合法！"
215 }
216 }
217 });
218 </script>
219 </body>
220 </html>
validate_form.html
运行结果：
七、总结一些注意事项
1.实际上对域的监听是通过<label></label>标签实现的，所以尽量要在被监听的元素旁边声明Label标签，如<label for="username">用户名</label>，其中for的名字要和被监听域的name属性相同，如<input type="text" name="username">，事实上如果没有改标签的话validate插件会自动检测并通过dom添加一个label标签。
2.对于下拉列表框，如果让某一个option元素的值变成""，那么该元素就不会被监听，这样就算是单击了该项，也不会被认为执行了选择的动作，这种情况适用于提示的option，如<option value="">请选择一个省份</option>。
3.规则添加的顺序决定了该规则的执行顺序，所以要谨慎选择添加规则选项的顺序。
4.不要使用""将正则表达式引起来，否则后果很严重。使用形式：/^内容$/
5.单选框、复选框必须加上label标签，下拉菜单则可以不用。
单选框：
<input type="radio" id="gender_male" value="m" name="gender"/>男
<input type="radio" id="gender_female" value="f" name="gender"/>女
<label style="display: none" for="gender" class="error">请选择性别</label>
复选框：
<input type="checkbox" name="checkbox1" id="qq1"/>乒乓球
<input type="checkbox" name="checkbox1" id="qq2" value="1" />羽毛球
<input type="checkbox" name="checkbox1" id="qq3" value="2" />上网
<input type="checkbox" name="checkbox1" id="qq4" value="3" />旅游
<input type="checkbox" name="checkbox1" id="qq5" value="4" />购物
<label style="display: none" for="checkbox1" class="error">您的兴趣爱好,至少选择一个</label>
