省时省力的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

面对如下一个表单验证：




如果需要自己写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

引用

<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>

然后直接写就可以了

<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还方便。


测试：
什么都不输入，提交


输入错误验证码，提交




    以上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) {
		}
	});