省时省力的jquery验证框架

前段的表单验证，重复性高，虽然网上一大堆js代码，每当邮件，电话号码什么的验证，直接copy，但是有了这个框架真实美包包。
jquery validate 验证框架，本来想详细写写用法，发现坛子里paskaa几年前写过，不知道为何帖子沉了。


详细使用：
http://www.iteye.com/topic/276661
http://www.iteye.com/topic/280295

官方文档参考：http://docs.jquery.com/Plugins/Validation

官方那个，我感觉这个文档写的不是很详细，读了几遍还是发现有些没讲清楚


既然有了前面的东东，我发帖的主要是为了分享好东东，并且写写我们项目里demo

面对如下一个表单验证：

[img]http://dl.iteye.com/upload/attachment/519440/db7e8af1-6842-3fa4-a4d4-e1c8f37d6123.jpg[/img]


如果需要自己写js，那么真实悲剧啊，下面是不使用框架的代码
那个写的一个叫累，写了这么多后，发现居然没有处理获取焦点后，提示消失

$(document).ready(function() {
 		$("#errorAuthor").hide();
	    $("#errorContent").hide();
	    $("#errorverifyCode").hide();
	    $("#errorverifyCodeError").hide();

	$("#verifyImage").click(function(){
	    $(this).attr("src", "/yiyaosou-webapp-front/random.action?d=" + Math.random());
	});
	$("#cmmAuthor").click(function() {
  		$("#errorAuthor").hide();
	});

	$("#cmmContent").click(function() {
  		$("#errorContent").hide();
	});
	$("#verifyCode").click(function() {
  		$("#errorverifyCode").hide();
  		$("#errorverifyCodeError").hide();
$.get("../productComment/prd_comt_verifyCode.action", function(data){
  			if(data=="error"){
  				$("#errorverifyCodeError").show();
  				return ;
  			}
	});
	});






});

function changeVerifyCode() {
	$("#verifyImage").attr("src", "/yiyaosou-webapp-front/random.action?d=" + Math.random());
}

function submitForm() {
	var author=$("#cmmAuthor").attr("value");
	var content=$("#cmmContent").attr("value");
	var verifyCode=$("#verifyCode").attr("value");
	var value=$("#verifyCode").attr("value");
	if(author==""){
		$("#errorAuthor").show();
		return ;
	}
	if(content==""){
		$("#errorContent").show();
		return ;
	}
	if(verifyCode==""){
		$("#errorverifyCode").show();
		return ;
	}


	$("form:first").submit();
} 

只需要做出如下更改：
先引入lib
[quote]
<script src="${application.WebResourceUrl }/scripts/global/lib/jquery/core/jquery-1.4.2.min.js" type="text/javascript" language="javascript"></script>
<script src="${application.WebResourceUrl }/scripts/global/lib/jquery/addons/jquery.validate-1.7/jquery.validate.min.js" type="text/javascript" language="javascript"></script>
<script src="${application.WebResourceUrl }/scripts/global/lib/jquery/addons/jquery.validate-1.7/jquery.validate.messages_cn.js" type="text/javascript" language="javascript"></script>
<script src="${application.WebResourceUrl }/scripts/global/lib/jquery/addons/jquery.validate-1.7/additional-methods.js" type="text/javascript" language="javascript"></script>

[/quote]

然后直接写就可以了

<script type="text/javascript" >
$(document).ready(function() {
$("#verifyImage").click(function(){
	    $(this).attr("src", "/yiyaosou-webapp-front/random.action?d=" + Math.random());
	});

	$("#productComment").validate({
		rules: {
			cmmAuthor: {
				required: true
			},
			cmmContent: {
				required: true
			},
			verifyCode:{
				required: true,
				remote: "../productComment/prd_comt_verifyCode.action"
			}
		},
		messages: {
			cmmAuthor:{
				required: "请输入您的姓名或昵称"
			},
			cmmContent:{
				required: "请输入您的评论"
			},
			verifyCode:{
				required: "请输入验证码",
				remote: "验证码不正确"
			}
		},

		errorPlacement: function(error,element){

			$("#errorMessage").append(error);
			$("#errorMessage").append($("<br/>"));

		},
			success: function(label) {
		}
	});	

});

remote为ajax验证，如果返回值是true，那么无提示，不返回就提示错误信息，这个比jqury写ajax还方便。


[size=medium]测试：[/size]
[color=red]什么都不输入，提交[/color]

[img]http://dl.iteye.com/upload/attachment/519442/10c7f4ec-5d9d-3b69-a007-07b359e49f6c.jpg[/img]
[color=red]输入错误验证码，提交[/color]

[img]http://dl.iteye.com/upload/attachment/519444/97738b36-a3a2-3bea-9f81-93e13abbf919.jpg[/img]


以上demo只是基本的使用，你还可以复杂的控制，比如在里面控制错误显示，demo里面的错误显示是自己在html里面控制的<span id="errorMessage" style="color: red;">，必须放到form表单内，否则错误提示在你时间触发时候不会消失，只会又生成一个提示，非常bug。
用框架控制，就紧跟message方法后面

// 定义错误信息提示的位置和样式
		errorElement: "em",	// 定义错误标记标签，<em>error</em>

		errorPlacement: function(error,element){
			element.nextAll("i").addClass("error");
			element.nextAll("i").append(error);
		},

		// 定义验证成功相关样式和事件
		success: function(label) {
		}
	});