jquery表单验证大全

二话不说直接见代码

		<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
		$(function(){
			
			//验证码放大镜
			$(".yzm_img").mouseover(function(e){
				var bigImag = $("<img id='bimg' src='"+$(this).attr("src")+"'/>");
				$(bigImag).css({
					"top":e.pageY+5,
					"left":e.pageX+10,
					"height":"100px",
					"width":"200px",
					"position":"absolute",
					"border":"5px solid #cad",
					"border-radius":"30px 10px",
				});
				$("body").append(bigImag);
			}).mouseout(function(){
				$("#bimg").remove();
			}).mousemove(function(e){
				$("#bimg").css({
					"top":e.pageY+5,
					"left":e.pageX+10,
					"height":"100px",
					"width":"200px",
					"position":"absolute",
					"border":"5px solid #cad",
					"border-radius":"30px 10px",
				});
			});
			
			//点击图片更换验证码
			$("#imgVcode").click(function(){
				$(this).attr('src',"${pageContext.request.contextPath }/user/getImageCode?d="+new Date().getTime());
			});
			//点击更换验证码
			$("#changeImg").click(function(){
				$("#imgVcode").attr('src',"${pageContext.request.contextPath }/user/getImageCode?d="+Math.random());
			}); 
			
			var ok1=false;
    		var ok2=false;
    		var ok3=false;
    		var ok4=false;
    		var ok5=false;
			
			//邮箱验证
			$("#txtEmail").blur(function(){
			//$("#name").val().length
				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){
		               		$("#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){
		               		$("#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>