表單驗(yàn)證js代碼

請(qǐng)轉(zhuǎn)載此文的朋友務(wù)必附帶原文鏈接，謝謝。

原文鏈接：http://xuyran.blog.51cto.com/11641754/1861926

<form class="mui-input-group">
	    <div class="mui-input-row">
	        <input type="tel"  placeholder="手機(jī)" required="required">     
	    </div>
	    <div>請(qǐng)輸入正確的手機(jī)號(hào)碼</div>
	    <div class="mui-input-row ss">
	        <input type="text"  placeholder="驗(yàn)證碼" id="yzm" required="required">
	        <button type="button" class="btn" id="getCode">發(fā)送</button>
	    </div>
	    <div>驗(yàn)證碼必須為6位數(shù)字</div>
	    <div class="mui-input-row" >
	        <input type="password"  placeholder="限制6-20位字符，區(qū)分大小寫(xiě)" name="password" required="required">
	    </div>
	    <div>密碼不得小于6或大于20個(gè)字符</div>
	    <div class="mui-input-row" >
	        <input type="password"  placeholder="確認(rèn)密碼" name="password-sure" required="required">
	    </div>
	    <div>兩次密碼輸入不一致</div>
	    <div class="mui-input-row" id="submit">
	         <button type="button" class="btn">提交</button>
	    </div>
	</form>

jquery代碼如下：

$(function(){
	//手機(jī)號(hào)檢查
	$("input[type='tel']").keyup(function(){
		var reg = /^\d*$/;
		if(this.value.length > 11){
        	this.value = this.value.substr(0,11);
        	$(this).focus();
        }
		else if(!reg.test(this.value)){
		    $(this).parent().next().show().html("手機(jī)號(hào)碼只能為數(shù)字");	
		    $(this).focus();
		}else{
			$(this).parent().next().hide();
		}	
	}).blur(function(){
		if(this.value == ""){
			$(this).parent().next().show().html("手機(jī)號(hào)碼不能為空");
			$(this).focus();
		}
		else if(!/^1[3|4|5|8]\d{9}$/.test(this.value)){
			$(this).parent().next().show().html("請(qǐng)輸入正確的手機(jī)號(hào)碼");	
			$(this).focus();
		}else{
			$(this).parent().next().hide();
			
		}	
	})
	//獲取短信驗(yàn)證碼
	$("#getCode").click(function(){
		$("input[type='tel']").trigger('blur');
		var time = 120;
		var error = $(this).parent().prev().css("display");
		alert(error);
		alert(error != "block");
		var phoneNum = $("input[type='tel']").val();
		if(phoneNum != ""&& error != "block"){
			$.ajax({
				type:"post",
				url:"/Ajax/VerificationCode.ashx",
				dataType:"json",
				data:{
					method:"SendCode",
					Phone:phoneNum 
				},
				success:function(data){
				if(data.reslut.msg == 1){			
				var t = setInterval(function(){
					time--;
					$(this).attr("disabled",true).addClass("grey")
					.html(time+"s<p style='font-size:10px'>已發(fā)送</p>")
					if(time == 0){
						clearInterval(t);
						$("#getCode").removeAttr("disabled").removeClass("grey").html("重新獲取驗(yàn)證碼");
					}
				},1000);
				}else{
					alert(data.result.msbox);
				}
				}	
			});
		}

	})
	//驗(yàn)證碼檢查
	$("#yzm").keyup(function(){
		var reg = /^\d*$/;
        if(this.value.length > 6){
        	this.value = this.value.substr(0,6);    	
        }
        else if(!reg.test(this.value)){
        	$(this).parent().next().show();
        	$(this).focus();
        }else{
			$(this).parent().next().hide();
		}	
	}).blur(function(){
		if(this.value == ""){
			$(this).parent().next().show().html("驗(yàn)證碼不能為空");
		}else if(this.value.length < 6){
			$(this).parent().next().show().html("驗(yàn)證碼必須為6位數(shù)字");
		}
	})
	//密碼檢查
	$("input[name = 'password']").blur(function(){
		
	if(this.value.length < 6||this.value.length > 20){
		$(this).parent().next().show();
	}else{
		$(this).parent().next().hide();
	}
	})
	//確認(rèn)密碼
	$("input[name= 'password-sure']").keyup(function(){
		var password = $("input[name = 'password']").val();
		if(this.value != password){
		$(this).parent().next().show();	
		}else{
			$(this).parent().next().hide();
		}
	}).blur(function(){
		if(this.value == "") {
			$(this).parent().next().show().html("密碼不能為空");	
		}
	})
	//整個(gè)表單驗(yàn)證
	$("#submit").click(function(){
		        $(".mui-input-row input").triggerHandler('blur');
		        var numError = $('.mui-input-row + div').css("display");
		        if(numError == "block"){
		        	return false;
		        }
		        $.ajax({
		        	type:"post",
		        	url:"/Ajax/User.ashx",
		        	dataType:"json",
		        	data:{
		        		method:"Reg",
		        		Phone: $("input[type = 'tel']").val(), 
		        		Pwd: $("input[name = 'password']").val(), 
		        		Code: $("#yzm").val()
		        	},
		        	success:function(data){
		        		var result = data.split("|");
                        if (result[0] == "error") {
	                       alert(result[1]);
	                        //location.reload();
	                    }
	              			if (result[0] == "success") {
	              			alert(result[1]);
	                		window.location.href="registerSuccess.html";
	            		}

		        	}

		        })
               
	})

})