jquery validate学习心得

据说，javascript最初的由来就是为了解决表单的验证问题，当然现在的js已经能够用来做各种各样炫酷的效果，不过表单验证一直以来都是js很重要的一个用途（在博客园第一篇博客，不知道说些什么开头~~）。

最近刚刚接触到了一个简答易用的表单验证插件jquery validation，下面来分享下这几天收集到的一些资料与学习心得。

一个优秀的表单验证插件：

     作为受众多web开发者追捧的validation，它理应拥有如下各种优点:

1.内置验证规则：拥有必填，url，数字，email等19类验证规则；

2.可方便的自定义验证规则；

3.有默认的验证信息提示，并可通过自定义提示信息覆盖默认信息；

4.实时验证：可通过keyup或blur事件触发验证，而非仅在表单提交时

默认校验规则：

$(".selector").validate
({
	debug:true
})

$.validator.setDefaults({
	debug:true
})

$(".selector").validate({
	submitHandler:function(form) {
		$(form).ajaxSubmit();
	}
})

$("#myform").validate({
	ignore:".ignore"
})

$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	}
})

$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	},
	messages:{
		name:"Name不能为空",
		email:{
			required:"E-mail不能为空",
			email:"E-mail地址不正确"
		}
	}
})

$("#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
})

$(".selector").validate({
	onsubmit:false
})

$(".selector").validate({
	onfocusout:false
})

$(".selector").validate({
   onkeyup:false
})

$(".selector").validate({
   onclick:false
})

$(".selector").validate({
   focusInvalid:false
})

$(".selector").validate({
   focusCleanup:true
})

$(".selector").validate({
	errorClass:"invalid"
})

$(".selector").validate
   errorElement:"em"
})

$(".selector").validate({
   wrapper:"li"
})

$("#myform").validate({
	errorLabelContainer:"#messageBox",
	wrapper:"li",
	submitHandler:function() {
		alert("Submitted!")
	}
})

$(".selector").validate({
	showErrors:function(errorMap,errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
		this.defaultShowErrors();
	}
})

$("#myform").validate({
	rrorPlacement:function(error,element) {
		error.appendTo(element.parent("td").next("td"));
   },
   debug:true
})

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

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