使用jquery validate结合zui作表单验证

1.引入jquery validate和zui

<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
<script src="${_b}/style/jquery-1.11.0.min.js"></script>
<script src="${_b}/style/other/jquery.validate.js" type="text/javascript"></script>
<script src="${_b}/style/other/jquery.validate.sc.js" type="text/javascript"></script>
<!-- ZUI Javascript组件 -->
<script src="${_b}/style/zui-1.8.1/js/zui.min.js"></script>

2.表单

 <tr>
    <td width="150" class="t-align_r">登录账号：</td>
    <td><input id="userLoginName" name="userLoginName" type="text" class="table_input" style="width:600px;" data-toggle="tooltip" data-original-title=""><span></span></td>
    <td width="400"><span class="redword">*</span><span class="greyword">由字母、数字组成，长度为6-20个字符</span></td>
  </tr>
  <tr>
    <td class="t-align_r">登录密码：</td>
    <td><input name="userPwd" id="pwd" type="password" class="table_input" style="width:600px;" data-toggle="tooltip" data-original-title=""></td>
    <td><span class="redword">*</span><span class="greyword">由字母、数字组成，长度为6-16个字符</span></td>
  </tr>
  <tr>
    <td class="t-align_r">确认密码：</td>
    <td><input type="password" name="ruserPwd" id="rpwd" class="table_input" style="width:600px;" data-toggle="tooltip" data-original-title=""></td>
    <td><span class="redword">*</span><span class="greyword">再次输入登录密码</span></td>
  </tr>

注意：<input />标签中data-toggle="tooltip" data-original-title="" 是引入zui的样式
需要在script中初始化

3.javascript

<script>
	$(function(){  //初始化
		$('[data-toggle="tooltip"]').tooltip();
		
        $('#saveBtn').click(function(){
			if($("#form1").valid()){
				$("#form1").submit();
			}else{
				var msg = new top.$.zui.Messager('提示消息：请检查字段合法性', {
	                	type : 'warning',
	                	fade : true,
	                	icon : 'warning-sign',
	                	time : 2000,
	                	scale : true
		    	});
				msg.show();
			}
        });
        
        //表单验证 begin
		$("#form1").validate({
			onsubmit: false, //关闭提交验证
			errorElement: "em",
			errorPlacement: function(error, element) {
				element[0].setAttribute("data-original-title",error[0].innerText);
			},
			success: function(label) {
				label.text("").addClass("success");
			},
			rules: {
				userLoginName:{required:true,rangelength:[6,20],userLoginName:true},
				userPwd:{required:true,rangelength:[6,16],pwd:true},
				ruserPwd:{required:true,notEqualTo:"#pwd"},
				sbdwmc:{required:true},
				zslx:{required:true},
				zsbh:{required:true},
				dwlxdh:{phone:true},
				userName:{required:true,rangelength:[2,30]},
				sfzh:{required:true},
				userEmail:{required:true,email:true},
				userMobile:{required:true,isMobile:true,mobileCheck:true},
			},
			
		});
		//表单验证 end
		
		//添加获取短信 验证码事件 begin
		$("#Captcha").click(function(){
			console.log(1);
			if($("#form1").validate().element($("#userMobile"))){
				console.log(2);
				 var c = 60;
				 $.post("getSmsCaptcha",{phone: $('#userMobile').val()},function(data){
				 	console.log(data);
				 	if(data.success){
						$('#SMSCODE_').val(data.msg);
						$('#Captcha').hide();
						$('#Captcha').after("<font id=info color=green size=2>发送验证码成功！</font><span id=count>60</span><span id=cc>秒后重新发送</span>");
				 	}
				 },'json');
				 var timer = setInterval(function(){
				 	$("#count").html(c-1);
				 	c--;
				 	if(c==0){
							$("#info").remove();
							$("#count").remove();
							$("#cc").remove();
							$('#Captcha').show();
							clearInterval(timer);
				 	}
				 },1000);
			}else{
				 var msg = new top.$.zui.Messager('提示消息：请输入正确的手机号', {
	                	type : 'warning',
	                	fade : true,
	                	icon : 'warning-sign',
	                	time : 2000,
	                	scale : true
		    	});
				msg.show();
			}
				  
		});
		//添加获取短信 验证码事件 end
		
		// userLoginName验证
		jQuery.validator.addMethod("userLoginName", function(value, element) {
		    var chrnum = /[a-z|A-Z|0-9]{6,20}$/;
		    return this.optional(element) || (chrnum.test(value));
			}, "格式不正确"
		);
		// pwd验证
		jQuery.validator.addMethod("pwd", function(value, element) {
		    var chrnum = /[a-z|A-Z|0-9]{6,16}$/;
		    return this.optional(element) || (chrnum.test(value));
			}, "格式不正确"
		);
		// 验证两次密码是否一致
		jQuery.validator.addMethod("notEqualTo", function(value, element, param) {
            return value == $(param).val();
        	}, "两次密码输入不一致!"
        );
        // 电话号码验证   
		jQuery.validator.addMethod("phone", function(value, element) {
		    var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
		    return this.optional(element) || (tel.test(value));
		}, "电话号码格式错误");
		// 身份证号码验证 
		jQuery.validator.addMethod("isIdCardNo", function(value, element) {
		return this.optional(element) || isIdCardNo(value);
		}, "请正确输入身份证号码");
		// 手机号的验证
		jQuery.validator.addMethod("isMobile", function(value, element) {
		    var chrnum = /^1[3|4|5|7|8|9|][0-9]{9}$/;
		    return this.optional(element) || (chrnum.test(value));
			}, "请输入正确的手机号码"
		);
		// 手机号是否注册的验证
		jQuery.validator.addMethod("mobileCheck",function(value,element){
			var flag = true;
			var result = '';
			$.ajax({
				url : "userVMobile1",
				data : {
					userMobile : value
				},
				async :false,
				dataType : 'json',
				success : function(data){
					console.log(data);
					if(data.success){
						flag = true;
					}else{
						flag = false;
						result = data.msg;
					}
				}
			});
			$.validator.messages.mobileCheck = result;
			return flag;
		});
		
		
	})
</script>

4.效果图