JQuery 插件概述：
插件（plugin）也被成为扩展，是一种遵循一定规范的应用程序编写出来的程序，JQuery有大量
现成的插件。
一句话，JQuery插件就是别人依照Jquery官方规范写好的各种功能，我们可以拿过来直接用，而不需要再去写。
jquery-validation-1.15.0
下载链接http://jqueryvalidation.org/
这个插件有三个主要方法
1、validate()
用于验证表单，也是该插件最核心的方法
2、valid()
验证表单是否通过
3、rules()
为一个表单控件、查看、新增、移除规则
增加了一些选择器
:blank
选择所有没有值或者值为空白的表单控件
:filled
选择所有填写了非空值的表单控件
:unchecked
与JQuery提供的:checked选择器相反
配置选项
1）rules：为各种表单添加验证规则
$("form1").validate({
rules{
控件1：{
验证规则1，验证规则2，验证规则3，验证规则4
},
控件2：{
验证规则1，验证规则2，验证规则3，验证规则4
......
},
......
}
});
在validation的包里面找到了了一个本地化的文件里面应该是所有的规则了
$.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} 的数值" ) } );
使用：
1) required：
name属性值:'required'
2) minlength
说明：最小字符长度
使用: minlength:数字
3) maxlength
说明：最大字符长度
使用：maxlength：数字
4) rangelength
说明：字符长度必须介于某个区间
使用：rangelength:[5,10]
5) min
说明：输入的最小值
使用：min:5
6) max
说明：输入的最大值
使用max:10
7) range
说明：输入的值必须介于某个区间
使用：range:[5,10]
8) number
说明：必须是合法数字
使用：number:true
9)digits:
说明：必须是整数
使用：digits：true
10) email
说明：必须是email正确格式的电子邮件
使用：email：true
11) url
说明：必须输入正确格式的网址
使用：url：true
12) equalTo
说明：输入值必须和给定选择器的字段的值相同
使用：equalTo:'选择器'
13)remote
使用：ajax方法调用服务器断脚本，验证输入值
使用：remote：'服务器端脚本'
例如：remote: check.php默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项
remote：{
url:'checkPassword.do',
type:'post',
data:{
username:'qwerty',
password:'123456'
}
}
参数与值和$.ajax方法相同
还有一些验证规则需要引入additional-methods.min.js,这里面添加了很多验证规则，
14) extension
说明：验证上传的文件的后缀名
使用：extension:合法的后缀名（不带点），多个的后缀明之间用竖线隔开
例如:extension:'cpp|java'
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../js/jquery-1.12.1.js"></script> <script type="text/javascript" src="../js/validation/jquery.validate.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#form1").validate({ rules: { field1:{ required:true /*如果只有一个验证规则则可以 field：'required',就不需要用对象了*/ }, field2:{ required:true }, field3:{ required:true, //要验证minlength则必须加上required规则 //否则它就不验证 minlength:2, maxlength:6 }, field4:{ required:true, rangelength:[4,6] }, field5:{ required:true, min:5, max:10 }, field6:{ required:true, range:[5,10] }, field7:{ required:true, number:true }, field8:{ required:true, digits:true }, field9:{ required:true, email:true }, field10:{ required:true, url:true }, field11:{ equalTo:'input[name="field6"]' } } }); }); </script> <style type="text/css"> form { margin: 10px 100px 10px 100px; } </style> </head> <body> <form id="form1"> <div> field1:<input type="text" name="field1" /> </div> <div> field2:<input type="text" name="field2" /> </div> <div> field3:<input type="text" name="field3" /> </div> <div> field4:<input type="text" name="field4" /> </div> <div> field5:<input type="text" name="field5" /> </div> <div> field6:<input type="text" name="field6" /> </div> <div> field7:<input type="text" name="field7" /> </div> <div> field8:<input type="text" name="field8" /> </div> <div> field9:<input type="text" name="field9" /> </div> <div> field10:<input type="text" name="field10" /> </div> <div> field11:<input type="text" name="field11" /> </div> <div> field16:<input type="text" name="field16" required="true" min="5"/> <!--如果属性比较少可以直接写在html标签里面 --> </div> <div> <input type="submit" name="submit" value="submit"/> </div> </form> </body> </html>