Jquery.validate使用体会

        Java Web开发中，对前端页面表单的校验是必不可少的环节。采用Jquery.validate验证框架可以大大节省开发时间，提高程序员的工作效率。它的使用非常简单，普通表单的常用验证规则基本上它都已经包含在内。以下是我在开发中使用Jquery.validate的几个实例，首先把Jquery.validate.js文件包含进来。

<script type="text/javascript" language="javascript" src="<s:url value="/js/jquery.validate.js" />"></script>

1、必须、长度等常规校验

$(document).ready(function(){
	$("#sForm").validate(validatorOption); 
	$("#question").rules('add',{
         required:true,
         maxlength:50,
         messages:{
         required:$.validator.format("<s:text name="struts.validate.common.request"/>",["<s:text name="faqManage.content"/>"]),
         maxlength:$.validator.format("<s:text name="struts.validate.common.maxlength"/>",["<s:text 	name="faqManage.content"/>",50])
        }
    });
});

2、执行后台验证

比如在添加类型时，需要判断该类型是否已经存在，如果已经存在则需要弹出提示消息。

$(function(){
	$("#sForm").validate(validatorOption);
	$("#name").rules('add',{
         required:true,
         remote:{
	url:"<s:url value='/admin/faqManageAction!nameIsExists.action'/>",
	type:"post",
	dateType:"json",
	data:{
		name:function(){return $("#name").val();}
		}
	},
	maxlength:10,
	messages:{
	     	required:$.validator.format("<s:text name="struts.validate.common.request"/>",["<s:text name="faqManage.typeName"/>"]),
	         maxlength:$.validator.format("<s:text name="struts.validate.common.maxlength"/>",["<s:text name="faqManage.typeName"/>",10]),
		remote:$.validator.format("<s:text name="faqManage.typeName.exists"/>",["<s:text name="faqManage.typeName"/>"])
            }
    });
});

其中$("#name")是文本框控件的id值。remote表示要执行后台方法。
3、自定义验证规则

如果Jquery.validate中的验证规则不能满足你的需要，可以自行添加规则。方法很简单，把验证方法加入到Jquery.validate.js中，调用方法不变。我以一个日期格式验证为例说明如何添加自定义验证。

// MIJ custom method added by zhaoyf 2012-02-17
dateTimeFormat:function(value,element){
	return this.optional(element) || /^\d{4}-(?:0\d|1[0-2])-(?:[0-2]\d|3[01])( (?:[01]\d|2[0-3])\:[0-5]\d\:[0-5]\d)?$/.test(value);
},

这个验证方法是验证用户输入的日期是否符合yyyy-MM-dd HH:mm:ss的格式，至于输入的是否是合法的日期，不在此列。例如用户输入2007-02-29 10:10:45则可以验证通过。只要它符合这个格式即可。将此段代码加入到Jquery.validate.js中，

	messages: {
		required: "This field is required.",
		dateTimeFormat:"please enter a validate datetime.",
		中略......
		min: $.validator.format("Please enter a value greater than or equal to {0}.")
	},
 	classRuleSettings: {
  		required: {required: true},
 		中略......
  		dateTimeFormat:{dateTimeFormat:true},
		中略......
   		creditcard: {creditcard: true}
 	},

验证方法写完之后，主要还有两个地方需要添加，messages、classRuleSettings。