据说，javascript最初的由来就是为了解决表单的验证问题，当然现在的js已经能够用来做各种各样炫酷的效果，不过表单验证一直以来都是js很重要的一个用途（在博客园第一篇博客，不知道说些什么开头~~）。
最近刚刚接触到了一个简答易用的表单验证插件jquery validation，下面来分享下这几天收集到的一些资料与学习心得。
一个优秀的表单验证插件：
作为受众多web开发者追捧的validation，它理应拥有如下各种优点:
1.内置验证规则：拥有必填，url，数字，email等19类验证规则；
2.可方便的自定义验证规则；
3.有默认的验证信息提示，并可通过自定义提示信息覆盖默认信息；
4.实时验证：可通过keyup或blur事件触发验证，而非仅在表单提交时
默认校验规则：
| 序号 | 规则 | 描述 |
|---|---|---|
| 1 | required:true | 必须输入的字段。 |
| 2 | remote:"check.php" | 使用 ajax 方法调用 check.php 验证输入值。 |
| 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: | 必须输入合法的信用卡号。 |
| 10 | equalTo:"#field" | 输入值必须和 #field 相同。 |
| 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。 |
| 名称 | 返回类型 | 描述 |
|---|---|---|
| validate(options) | Validator | 验证所选的 FORM。 |
| valid() | Boolean | 检查是否验证通过。 |
| rules() | Options | 返回元素的验证规则。 |
| rules("add",rules) | Options | 增加验证规则。 |
| rules("remove",rules) | Options | 删除验证规则。 |
| removeAttrs(attributes) | Options | 删除特殊属性并且返回它们。 |
| 自定义选择器 | ||
| :blank | Validator | 没有值的筛选器。 |
| :filled | Array <Element> | 有值的筛选器。 |
| :unchecked | Array <Element> | 没选择的元素的筛选器。 |
| 实用工具 | ||
| jQuery.format(template,argument,argumentN...) | String | 用参数代替模板中的 {n}。 |
| 名称 | 返回类型 | 描述 |
|---|---|---|
| form() | Boolean | 验证 form 返回成功还是失败。 |
| element(element) | Boolean | 验证单个元素是成功还是失败。 |
| resetForm() | undefined | 把前面验证的 FORM 恢复到验证前原来的状态。 |
| showErrors(errors) | undefined | 显示特定的错误信息。 |
| Validator 函数 | ||
| setDefaults(defaults) | undefined | 改变默认的设置。 |
| addMethod(name,method,message) | undefined | 添加一个新的验证方法。必须包括一个独一无二的名字，一个 JAVASCRIPT 的方法和一个默认的信息。 |
| addClassRules(name,rules) | undefined | 增加组合验证类型，在一个类里面用多种验证方法时比较有用。 |
| addClassRules(rules) | undefined | 增加组合验证类型，在一个类里面用多种验证方法时比较有用。这个是同时加多个验证方法。 |
| 描述 | 代码 |
|---|---|
| debug：进行调试模式（表单不提交）。 |
$(".selector").validate
({
debug:true
})
|
| 把调试设置为默认。 |
$.validator.setDefaults({
debug:true
})
|
| submitHandler：通过验证后运行的函数，里面要加上表单提交的函数，否则表单不会提交。 |
$(".selector").validate({
submitHandler:function(form) {
$(form).ajaxSubmit();
}
})
|
| ignore：对某些元素不进行验证。 |
$("#myform").validate({
ignore:".ignore"
})
|
| rules：自定义规则，key:value 的形式，key 是要验证的元素，value 可以是字符串或对象。 |
$(".selector").validate({
rules:{
name:"required",
email:{
required:true,
email:true
}
}
})
|
| messages：自定义的提示信息，key:value 的形式，key 是要验证的元素，value 可以是字符串或函数。 |
$(".selector").validate({
rules:{
name:"required",
email:{
required:true,
email:true
}
},
messages:{
name:"Name不能为空",
email:{
required:"E-mail不能为空",
email:"E-mail地址不正确"
}
}
})
|
| groups：对一组元素的验证，用一个错误提示，用 errorPlacement 控制把出错信息放在哪里。 |
$("#myform").validate({
groups:{
username:"fname
lname"
},
errorPlacement:function(error,element) {
if (element.attr("name") == "fname" || element.attr("name") == "lname")
error.insertAfter("#lastname");
else
error.insertAfter(element);
},
debug:true
})
|
| Onubmit：类型 Boolean，默认 true，指定是否提交时验证。 |
$(".selector").validate({
onsubmit:false
})
|
| onfocusout：类型 Boolean，默认 true，指定是否在获取焦点时验证。 |
$(".selector").validate({
onfocusout:false
})
|
| onkeyup：类型 Boolean，默认 true，指定是否在敲击键盘时验证。 |
$(".selector").validate({
onkeyup:false
})
|
| onclick：类型 Boolean，默认 true，指定是否在鼠标点击时验证（一般验证 checkbox、radiobox）。 |
$(".selector").validate({
onclick:false
})
|
| focusInvalid：类型 Boolean，默认 true。提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点。 |
$(".selector").validate({
focusInvalid:false
})
|
| focusCleanup：类型 Boolean，默认 false。当未通过验证的元素获得焦点时，移除错误提示（避免和 focusInvalid 一起使用）。 |
$(".selector").validate({
focusCleanup:true
})
|
| errorClass：类型 String，默认 "error"。指定错误提示的 css 类名，可以自定义错误提示的样式。 |
$(".selector").validate({
errorClass:"invalid"
})
|
| errorElement：类型 String，默认 "label"。指定使用什么标签标记错误。 |
$(".selector").validate
errorElement:"em"
})
|
| wrapper：类型 String，指定使用什么标签再把上边的 errorELement 包起来。 |
$(".selector").validate({
wrapper:"li"
})
|
| errorLabelContainer：类型 Selector，把错误信息统一放在一个容器里面。 |
$("#myform").validate({
errorLabelContainer:"#messageBox",
wrapper:"li",
submitHandler:function() {
alert("Submitted!")
}
})
|
| showErrors：跟一个函数，可以显示总共有多少个未通过验证的元素。 |
$(".selector").validate({
showErrors:function(errorMap,errorList) {
$("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
this.defaultShowErrors();
}
})
|
| errorPlacement：跟一个函数，可以自定义错误放到哪里。 |
$("#myform").validate({
rrorPlacement:function(error,element) {
error.appendTo(element.parent("td").next("td"));
},
debug:true
})
|
| success：要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。 |
$("#myform").validate({
success:"valid",
submitHandler:function() {
alert("Submitted!")
}
})
|
首先第一步，地球人都知道——要导入相应的js库；
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
另外，一般我们还会引入另一个js文件，validate_expand.js，具体看下列源代码截图：
注：使用之前有必要检查下正则表达式，如手机号验证的表达式为：mobile = /(^(13|14|15|18)d{9}$)/; 这显然是不全面的，现在已经有170号段的了，
所以要改成/(^(13|14|15|17|18)d{9}$)/，否则可能会出现错误。
然后就可以开始正式引用了，如下所示
1 $().ready(function() { 2 $("#signupForm").validate({ //验证必须是针对form，否则无效； 3 onfocusout:function(element) { $(element).valid();},/验证触发方式 4 onkeyup:function(element){ 5 $(element).valid(); 6 }, 7 //验证规则 8 rules: { 9 email: { 10 required: true, 11 email: true 12 }, 13 password: { 14 required: true, 15 minlength: 6 16 }, 17 confirm_password: { 18 required: true, 19 minlength: 6, 20 equalTo: "#password" 21 } 22 }, 23 //提示信息 24 messages: { 25 email: { 26 required: "请输入Email地址", 27 email: "请输入正确的email地址" 28 }, 29 password: { 30 required: "请输入密码", 31 minlength: jQuery.format("密码不能小于{0}个字 符") 32 }, 33 confirm_password: { 34 required: "请输入确认密码", 35 minlength: "确认密码不能小于5个字符", 36 equalTo: "两次输入密码不一致不一致" 37 } 38 }， 39 errorPlacement: function(error, element) { 40 //内容 41 }， 42 success:function(label){ 43 //内容 44 } 45 }); 46 });
可以看出，我们通过validate可以方便的进行验证，如添加自定义验证及提示信息等。
另外，我们可以将错误提示信息显示在其他位置，如在方法内部”error.appendTo(element.parent())“,或者在成功时调用一些方法。
好了，暂时就总结这么多吧，以后有新的心得会及时分享上来，如有什么错误也请大家不要留情 ，狠狠拍吧