jQuery学习之路（8）- 表单验证插件-Validation，jquery-validation
▓▓▓▓▓▓ 大致介绍

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

　　下载地址：

 

▓▓▓▓▓▓ 基本语法

　　　Validate插件需要jQuery,所以我们需要在头部引入jQuery和Validate文件

1 <script type="text/javascript" src="lib/jquery.js"></script> 2 <script type="text/javascript" src="dist/jquery.validate.min.js"></script>

　　

　　文件引入完毕，先写个简单的表单

验证完整的表单名字姓氏用户名密码验证密码Email请同意我们的声明

 

　　然后我们开始写验证表单的代码

　　首先我们需要知道那个表单需要验证

1 $(function(){ 2 3 $('#commentForm').validate(); 4 5 });

　　然后开始写验证的规则，要注意这里选择元素是根据每个标签的name属性选择的，基本语法如下

1 $('#commentForm').validate({ 2 rules: { lastname: { 5 required: true, } 8 } 9 });

　

　　从上面可以看出，如果一个信息只有一个验证要求可以写成一行，比如 firstname；如果有多个验证要写成像 lastname 这种形式；知道了基本的语法

　　在看看Validation都提供了那些校验规则

(1)、required:true 必输字段 (2)、remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.jsp验证输入值 (3)、email:true 必须输入正确格式的电子邮件 (4)、url:true 必须输入正确格式的网址 (5)、date:true 必须输入正确格式的日期，日期校验ie6出错，慎用 (6)、dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性 (7)、number:true 必须输入合法的数字(负数，小数) (8)、digits:true 必须输入整数 (9)、creditcard:true 必须输入合法的信用卡号 (10)、equalTo:"#password" 输入值必须和#password相同 (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:10 输入值不能小于10

 

　　我们将上面的表单验证完善一下，如下

1 $(function(){ 2 3 $('#commentForm').validate({ 4 rules: { 5 6 firstname: { 7 required: true, 8 minlength: 5 9 }, 10 11 lastname: "required", 12 13 username: { 14 required: true, 15 rangelength: [4,6] 16 }, 17 18 password: { 19 required: true, 20 minlength: 4, 21 number: true 22 }, 23 24 confirm_password: { 25 required: true, 26 minlength: 3, 27 equalTo: '#password' 28 }, 29 30 email: { 31 required: true, 32 email: true 33 }, 34 35 } 36 }); 37 });

 

 

　　效果：

　　可以看到，这里的提示默认是英文的不太满意，将提示信息更改成中文有两种方式

　　第一种方式：引入语言文件（推荐）

1 <script type="text/javascript" src="dist/localization/messages_zh.js"></script>

　　他的提示信息是：

1 required: "这是必填字段", 2 remote: "请修正此字段", 3 email: "请输入有效的电子邮件地址", 4 url: "请输入有效的网址", 5 date: "请输入有效的日期", 6 dateISO: "请输入有效的日期 (YYYY-MM-DD)", 7 number: "请输入有效的数字", 8 digits: "只能输入数字", 9 creditcard: "请输入有效的信用卡号码", 10 equalTo: "你的输入不相同", 11 extension: "请输入有效的后缀", 12 maxlength: $.validator.format("最多可以输入 {0} 个字符"), 13 minlength: $.validator.format("最少要输入 {0} 个字符"), 14 rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"), 15 range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"), 16 max: $.validator.format("请输入不大于 {0} 的数值"), 17 min: $.validator.format("请输入不小于 {0} 的数值")