jquery validate学习心得

     据说，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())“,或者在成功时调用一些方法。

好了，暂时就总结这么多吧，以后有新的心得会及时分享上来，如有什么错误也请大家不要留情 ，狠狠拍吧

posted @ 2015-05-01 22:31  走在起点  阅读(374)  评论(0)  编辑  收藏  举报