前面的话
最常使用javascript的场合就是表单的验证，而jQuery作为一个优秀的javascript库，也提供了一个优秀的表单验证插件——Validation。Validation是历史最悠久的jQuery插件之一，经过了全球范围内不同项目的验证，并得到了许多Web开发者的好评。本文将详细介绍validation插件
概述
jQuery Validate插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言
作为一个标准的验证方法库，Validation拥有以下特点：
1、内置验证规则：拥有必填、数字、E-Mail、URL和信用卡号等19类内置验证规则
2、自定义验证规则：可以很方便地自定义验证规则
3、简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能
4、实时验证：可以通过keyup或blur事件触发验证
validation作为jQuery的一个插件，使用时需要同jQuery一起引入，注意要先引入jquery
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script> <script src="http://files.cnblogs.com/files/xiaohuochai/jquery.validate-1.13.1.js"></script>
快速上手
validation功能强大且API众多，如果要快速上手，只要掌握常用功能即可
<form id="demoForm">
<p>
<label for="username">用户名：</label>
<input type="text" id="username" name="username"/>
</p>
<p>
<label for="password">密码：</label>
<input type="password" id="password" name="password"/>
</p>
<p>
<input type="submit" value="登录"/>
</p>
</form>
<script>
$('#demoForm').validate({
rules:{
username:{
required: true,
minlength: 2,
maxlength: 10
},
password:{
required: true,
minlength: 2,
maxlength:10
}
}
})
</script>
上述代码主要对name为'username'和'password'这两个input控件进行了校验，这两个控件必须填写内容，且字符长度必须在2-10之间
校验规则
在快速上手的例子中，使用了required、minlength和maxlength这三个校验规则。实际上validation的校验规则有17个之多
序号 规则 描述 required:true 必须输入的字段 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值 email:true 必须输入正确格式的电子邮件 url:true 必须输入正确格式的网址 date:true 必须输入正确格式的日期，内部调用Date.parse()方法进行校验 dateISO:true 必须输入正确格式的日期(ISO)，如：2009-06-23，1998/01/22 number:true 必须输入合法的数字(负数，小数) digits:true 必须输入整数 creditcard: 必须输入合法的信用卡号 equalTo:"#field" 输入值必须和 #field 相同 accept: 输入拥有合法后缀名的字符串(上传文件的后缀) maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符) minlength:10 输入长度最小是 10 的字符串(汉字算一个字符) rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符) range:[5,10] 输入值必须介于 5 和 10 之间 max:5 输入值不能大于 5 min:10 输入值不能小于 10
下面使用一个更详细的例子，对上面的17个规则进行应用
<form id="demoForm">
<p>
<label for="username">用户名：</label>
<input type="text" id="username" name="username"/>
</p>
<p>
<label for="password">密码：</label>
<input type="password" id="password" name="password"/>
</p>
<p>
<label for="confirm-password">确认密码</label>
<input type="password" id="confirm-password" name="confirm-password"/>
</p>
<p>
<label for="email">电子邮件：</label>
<input id="email" name="email"/>
</p>
<p>
<label for="url">网址：</label>
<input id="url" name="url"/>
</p>
<p>
<label for="date">生日：</label>
<input id="date" name="date"/>
</p>
<p>
<label for="num">随机数(0-9)：</label>
<input id="num" name="num"/>
</p>
<p>
<label for="card">信用卡号：</label>
<input id="card" name="card"/>
</p>
<p>
<input type="submit" value="登录"/>
</p>
</form>
<script>
$('#demoForm').validate({
rules:{
username:{
required: true,
maxlength: 10
},
password:{
required: true,
range:[5,10]
},
'confirm-password':{
equalTo: "#password"
},
email:{
email:true
},
url:{
url:true
},
date:{
dateISO:true
},
num:{
min:0,
max:9
},
card:{
creditcard:true
}
}
})
</script>
默认提示
由上面的例子中看出，validate的默认提示是英文的
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date ( ISO ).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
maxlength: $.validator.format( "Please enter no more than {0} characters." ),
minlength: $.validator.format( "Please enter at least {0} characters." ),
rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
range: $.validator.format( "Please enter a value between {0} and {1}." ),
max: $.validator.format( "Please enter a value less than or equal to {0}." ),
min: $.validator.format( "Please enter a value greater than or equal to {0}." )
}
不过可以将其修改为中文，只要加入以下代码
$.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} 的数值")
});
使用方式
上面的例子中，validate控件的使用，都是通过使用validate()方法完成的，由于这种方法将HTML结构和javascript逻辑分离，使得代码更加优化
实际上，还有另一种方法就是通过添加HTML属性的方式或添加class类名的方式来进行验证，类似于HTML5新增的input类控件的功能
由于已经将验证规则添加到HTML元素中，所以调用validate()方法时，参数为空
<form id="demoForm">
<p>
<label for="username">用户名：</label>
<input type="text" id="username" name="username" class="required" minlength="2"/>
</p>
<p>
<label for="email">电子邮件：</label>
<input id="email" name="email" class="required email"/>
</p>
<p>
<label for="url">网址：</label>
<input id="url" name="url" class="url"/>
</p>
<p>
<input type="submit" value="登录"/>
</p>
</form>
<script>
$('#demoForm').validate({})
</script>
更改提示
无论是validate插件自带的英文提示，或者是其扩展的中文提示，可能与实际项目的需求不相符。这时，就需要我们对错误提示