jQuery Validate插件使用

这几天一直在接触验证方面的工作，jQuery Validate是一个比较常用的验证插件，说一下心得吧。

效果图类似

说一个简单的，现在需求是模板编号只能是正整数数字。

控件代码如下：

<div class="control-group">
	<label class="control-label">模板编号：</label>
	<div class="controls">
		<form:input path="value" htmlEscape="false" maxlength="11"  class="input-xlarge required"/>
		<span class="help-inline"><font color="red">*</font> </span>
	</div>
</div>

接下来就是使用jQuery了，第一步肯定是导入js库了，这个不用说，第二步开始写js

<script type="text/javascript">
	$(document).ready(function() {
		// 模板编号验证
		jQuery.validator.addMethod("isInteger", function(value, element) {
			var aint=parseInt(value);	
			return aint>0&& (aint+"")==value;   
		}, "请正确填写模板编号");
		
		if($("#value")){
			$("#value").focus();
		}
		
		$("#inputForm").validate({
		    rules : {
		    	value : {
		    		isInteger : true,
		            required : true
		        }
		    },
		    messages : {
		    	value : {
		            required : "请输入模板编号",
		            //isInteger : "请正确填写您的模板编号"
		        }
		    },
			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);
				}
			}
		});
	});
</script>

解释一下吧，首先jQuery.validator.addMethod(function,String)里写的是自定义的验证方法和输出的信息；

然后if($("#value")){ $("#value").focus();}是一个聚焦的判断；

$("#inputForm").validate()里面就是写规则神马的了，inputForm值要验证的表单ID，rules是要使用的规则，messages是输出的信息，submitHandler是提交的时候要做什么，errorPlacement是错误信息放置的地方

效果图：

但是仅仅斯这样肯定是不够的，编号一般都是唯一的，所以在用户填写完后，还需要查重。

rules : {
	value : {
		isInteger : true,
        required : true,
            remote: {
             url: "${ctx}/portal/porTemplate/checkValue",//后台处理程序
            type: "post",               //数据发送方式
             dataType: "json",           //接受数据格式   
            data: {                     //要传递的数据
            	value: function() {
                    return $("#value").val();
                 }
             }
         }
    }
},
messages : {
	value : {
        required : "请输入模板编号",
        //isInteger : "请正确填写您的模板编号"
        remote:"模板编号已经存在"
   	}
}

这里使用了remote，调用url处的检验方法，同时把date传进去,返回false的时候会提示messages里面remote的信息。

查重部分如下：

@RequestMapping(value = "checkValue")
public String checkMobile(String value, Model model,
		RedirectAttributes redirectAttributes) {
	PorTemplate su = new PorTemplate();
	su.setValue(value);
	//su.getSqlMap().put("value", value);
	List<PorTemplate> list = porTemplateService.findList(su);
	if (list.size() == 0) {
		return "true";
	} else {
		return "false";
	}
}

这部分看具体情况吧，就是在数据库里面做个查询。

效果图如下：

jQuery Validate还有很多自带的验证方法，可以去http://www.runoob.com/jquery/jquery-plugin-validate.html学习浏览