jquery validate插件

之前经常用jquery的validate插件，觉得非常好用只是每次有用到的时候就会去copy原来的项目中找，并且有些比较不常用的用法就会找很长的时间，所以觉得将其总结一下，方便别人查找也方便自己快速查找使用。

1、初始化用法：

 

$("#inputForm").validate({
				rules : {
					url : {
						required :false,
						url :true
					},
					startTime : {
						required : true,
						startValidate : true,
						remote:{
							type: "POST",
							async: false,
							url: "${ctx}/vrworld/content/dayRecommend/validate/time",
							dataType:"json",
							data : {
								startEndTime :function(){
									return $("input[name='startTime']").val();
								},
								id : function(){
									/* if(isAdd) return null; */
									return $("input[name='id']").val();
								}
							}
						}
					},
					endTime : {
						required :true,
						timeValidate :true,
						remote:{
							type: "POST",
							async: false,
							url: "${ctx}/vrworld/content/dayRecommend/validate/time",
							dataType:"json",
							data : {
								startEndTime :function(){
									return $("input[name='endTime']").val();
								},
								id : function(){
									/* if(isAdd) return null; */
									return $("input[name='id']").val();
								}
							}
						}
					}
				},
				messages : {
					url : {
						required :'',
						url :'请输入合法的网址！'
					},
					startTime : {
						required :'请选择开始时间！',
						remote:'该开始时间已经在其他的每天推荐时间段存在，请修改'
					},
					endTime : {
						required :'请选择结束时间！',
						timeValidate :'开始时间不能大于结束时间，请修改！',
						remote:'该结束时间已经在其他的每天推荐时间段存在，请修改'
					}
				},
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});

 

 

 

validate插件提供了常用的验证方式，大致如下（不满足的部分可以使用自定义方法、remote方法等方式进行自定义）：

 

序号	规则	描述
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。

 

 

 

2、其中 errorPlacement函数是重新设置错误信息的显示位置

3、remote 是一个与服务端交互的判定方式（服务器端直接返回boolean类型即可）

4、很多时候需要在类型切换的时候某些字段修改验证方式

 

// 增加验证规则
$("#aaa").rules("add",{
			required:true,
			messages:{required:"${projectsite_input_info2}"}
		});
// 移除验证规则（修改验证规则）
$("#aaa").rules("remove","required");

 

 

 

 

 

5、最近在验证开始时间和结束时间的时候，由于使用的时间插件，所以很多验证的促发机制似乎不是很好使用（代码如下），所以需要在开始时间选择之后再验证一下结束时间是否大于开始时间所以 需要单独对某一字段再进行验证  $("input[name='endTime']").valid();

 

<div class="control-group">
			<label class="control-label">开始时间：</label>
			<div class="controls">
				<input name="startTime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate required"
					value="<fmt:formatDate value="${dayRecommend.startTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"
					onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/>
				<span class="help-inline"><font color="red">*</font> </span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">结束时间：</label>
			<div class="controls">
				<input name="endTime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate required"
					value="<fmt:formatDate value="${dayRecommend.endTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"
					onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/>
				<span class="help-inline"><font color="red">*</font> </span>
			</div>
		</div>

6、自定义方法进行判定

 

 

// 开始时间修改后重新验证结束时间（也可以手动写开始时间的remote以出发该事件）
		jQuery.validator.addMethod("startValidate", function(value, element) {
			var start = $("input[name='startTime']").val();
			var end = $("input[name='endTime']").val();
			if(start != "" && end != ""){
				if(start < end){
					$("input[name='endTime']").valid();
				}
				return true;
			}
			return true;
		}, "");
	
		// 开始时间和结束时间验证
		jQuery.validator.addMethod("timeValidate", function(value, element) {
			var start = $("input[name='startTime']").val();
			var end = $("input[name='endTime']").val();
			if(start != "" && end != ""){
				return this.optional(element) || (start < end);
			}
			return true;
		}, "开始时间不能大于结束时间，请修改！");