jQuery表单验证

 jquery代码如下：

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	
	var ok1=false;
	var ok2=false;
	var ok3=false;
	var ok4=false;
	var ok5=false;
	
	//邮箱验证
	$("#txtEmail").blur(function(){
		var Email = $(this).val();
		   if(Email== ""){
			 $("#EmailMsg").html("<b><font color='red'>邮箱不能为空~~!</font><b/>");
		   }else{             //正则表达式验证邮箱格式
			   var regEmail = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
			   if(regEmail.test(Email)){  //验证是否符合邮箱格式
					$("#EmailMsg").html("<b><font color='green'>邮箱验证通过~~!</font><b/>"); 
					ok1=true;    
			   }else{
					$("#EmailMsg").html("<b><font color='red'>邮箱格式不正确~~!</font><b/>");
			   }	
		   }
	});
	
	//昵称验证
	$("#txtNickName").blur(function(){
		var NickName = $(this).val();
		   if(NickName== ""){
			 $("#NickNameMsg").html("<b><font color='red'>昵称不能为空~~!</font><b/>");
		   }else{
			   if(NickName.length<4){  //验证昵称长度大于四位
					$("#NickNameMsg").html("<b><font color='red'>昵称格式不正确~~!</font><b/>");     
			   }else{
					$("#NickNameMsg").html("<b><font color='green'>昵称验证通过~~!</font><b/>");
					ok2=true;
			   }	
		   }
	});
	
	//密码验证
	$("#txtPassword").blur(function(){
		var Password = $(this).val();
		   if(Password== ""){
			 $("#PasswordMsg").html("<b><font color='red'>密码不能为空~~!</font><b/>");
		   }else{
			   if(Password.length<6 || Password.length>20){  //验证密码长度是否在6~20之间
					$("#PasswordMsg").html("<b><font color='red'>密码格式不正确~~!</font><b/>");     
			   }else{
					$("#PasswordMsg").html("<b><font color='green'>密码验证通过~~!</font><b/>");
					ok3=true;
			   }
		   }
	});
	
	//确认密码验证
	$("#txtRepeatPass").blur(function(){
		var passwprd = $("#txtPassword").val();
		//alert(passwprd);
		var RepeatPass = $(this).val();
		   if(RepeatPass== ""){
			 $("#RepeatPassMsg").html("<b><font color='red'>不能为空~~!</font><b/>");
		   }else{
			   if(RepeatPass == passwprd){  //验证确认密码与密码是否一致
					$("#RepeatPassMsg").html("<b><font color='green'>密码验证通过~~!</font><b/>");     
					ok4=true;
			   }else{
					$("#RepeatPassMsg").html("<b><font color='red'>密码不一致~~!</font><b/>");
			   }
		   }
	});
	
	//验证码验证
	$("#txtVerifyCode").blur(function(){
		var Password = $(this).val();
		   if(Password== ""){
			 $("#vcodeValidMsg").html("<b><font color='red'>密码不能为空~~!</font><b/>");
		   }else{
			   if(Password.length<4 || Password.length>4){  //验证验证码长度是否是4位
					$("#vcodeValidMsg").html("<b><font color='red'>密码格式不正确~~!</font><b/>");     
			   }else{
					$("#vcodeValidMsg").html("<b><font color='green'>密码验证通过~~!</font><b/>");
					ok5=true;
			   }
		   }
	});
	
	//提交按钮验证
   $("form").submit(function(){
		//首先执行需要把blur方法执行一遍，这样显示的错误信息 然后记录错误信息的长度 只要长度大于0就阻止提交
	   $("input").trigger("blur");
	   //提交按钮,所有验证通过方可提交  
		 if(ok1 && ok2 && ok3 && ok4 && ok5){
		  $('form').submit();
		 }else{
		  return false;
		 }
	}); 
});
</script>

Html代码如下：

<form name="ctl00" method="post" action="${pageContext.request.contextPath }/user/save">
	<table >
		<tr>
			<td>请填写您的Email地址：</td>
			<td>
				<input name="user.email" type="text" id="txtEmail" />
				<span id="EmailMsg"></span>
			</td>
		</tr>
		<tr>
			<td>设置您在当当网的昵称：</td>
			<td>
				<input name="user.nickName" type="text" id="txtNickName" />
				<span id="NickNameMsg"></span>
			</td>
		</tr>
		<tr>
			<td>设置密码：</td>
			<td>
				<input name="user.password" type="password" id="txtPassword" />
				<span id="PasswordMsg"></span>
			</td>
		</tr>
		<tr>
			<td>再次输入您设置的密码：</td>
			<td>
				<input name="password1" type="password" id="txtRepeatPass" />
				<span id="RepeatPassMsg"></span>
			</td>
		</tr>
		<tr>
			<td>验证码：</td>
			<td>
				<img class="yzm_img" alt="加载失败" id='imgVcode' src="<s:url value="/user/getImageCode"/>" />
				<input name="imageCode" type="text" id="txtVerifyCode"/>
				<p>
					<span id="vcodeValidMsg">请输入图片中的四个字母。</span>
					<a href="#" id="changeImg">看不清楚？换个图片</a>
				</p>
			</td>
		</tr>
	</table>
	
	<input id="btnClientRegister" name="submit"  type="submit" value="注 册"/>
	
</form>