jquery.validate验证一些小细节

/*自定义jquery验证addMethod：
	  第一个参数代表验证的目标class属性必须很重要。
	  第二个参数匿名方法，此方法有三个参数，打印看一下其是什么。
	  第三个参数我在这里没写，文档说是提示信息，感觉不对，就没用照样显示信息。在下面rules里面定义。*/
          可以直接返回true或者false.
	jQuery.validator.addMethod("devNo",function(value,element,param){
		return new RegExp(/^[1-9]\d*$/).test(value);
	});
	jQuery.validator.addMethod("devHost",function(value,element,param){
		return new RegExp(/^192.168.(\d).(\d\d)$/).test(value);
	});
	jQuery.validator.addMethod("routerNumber",function(value,element,param){
		return new RegExp(/^[1-9]\d*$/).test(value);
	});
		 $(function(){
			 $("#inputForm").validate({
				//自定义验证规格
				 rules:{
					//devNo和上面自定义的addnethod方法里面第一个参数一致
					 devNo:{
						 //并设置为true
						 devNo:true
	                 },
	                 devHost:{
	                	 devHost:true
	                 },
	                 routerNumber:{
	                	 routerNumber:true
	                 }
				},
				//自定义显示消息
				messages:{
					//devNo和上面自定义的addnethod方法里面第一个参数一致
					devNo:{
						/*将要显示的消息（默认位置），此处消息定义了再在jQuery.validator.addMethod
						里面用第三个参数定义消息内容只会显示此处的，因此在jQuery.validator.addMethod
						中未定义第三个参数*/
						devNo:"请输入正整数！"
	                 },
	                 devHost:{
	                	 devHost:"请输入IP地址192.168.5.43的格式！"
	                 },
	                 routerNumber:{
	                	 routerNumber:"请输入正整数！"
	                 }
				},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-group")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});

 

自己亲自测试通过，导包什么的就自己百度。

注意：上面第一个参数时对应的form表单的class属性，方法可以直接返回true或者false，对应的提示信息也就显示了。

 

			<div class="form-group required">
				<label class="col-sm-2 control-label">设备号：</label>
				<div class="col-sm-6">
					<form:input path="devNo" htmlEscape="false" maxlength="60" class="form-control required "/>
				</div>
			</div>
			<div class="form-group required ">
				<label class="col-sm-2 control-label">主机IP：</label>
				<div class="col-sm-6">
					<form:input path="devHost" htmlEscape="false" maxlength="30" class="form-control required "/>
				</div>
			</div>
			<div class="form-group required ">
				<label class="col-sm-2 control-label">总通道数：</label>
				<div class="col-sm-6">
					<form:input path="routerNumber" htmlEscape="false" maxlength="30" class="form-control required "/>
				</div>
			</div>

 

就这些东西，方便下次翻出来用！

 

 

 

效果如下图：