表單驗證js代碼

標籤：query   表單驗證   

請轉載此文的朋友務必附帶原文連結，謝謝。

原文連結：http://xuyran.blog.51cto.com/11641754/1861926

<form class="mui-input-group">    <div class="mui-input-row">        <input type="tel"  placeholder="手機" required="required">         </div>    <div>請輸入正確的手機號碼</div>    <div class="mui-input-row ss">        <input type="text"  placeholder="驗證碼" id="yzm" required="required">        <button type="button" class="btn" id="getCode">發送</button>    </div>    <div>驗證碼必須為6位元字</div>    <div class="mui-input-row" >        <input type="password"  placeholder="限制6-20位字元，區分大小寫" name="password" required="required">    </div>    <div>密碼不得小於6或大於20個字元</div>    <div class="mui-input-row" >        <input type="password"  placeholder="確認密碼" 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(){//手機號檢查$("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("手機號碼只能為數字");    $(this).focus();}else{$(this).parent().next().hide();}}).blur(function(){if(this.value == ""){$(this).parent().next().show().html("手機號碼不可為空");$(this).focus();}else if(!/^1[3|4|5|8]\d{9}$/.test(this.value)){$(this).parent().next().show().html("請輸入正確的手機號碼");$(this).focus();}else{$(this).parent().next().hide();}})//擷取簡訊驗證碼$("#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‘>已發送</p>")if(time == 0){clearInterval(t);$("#getCode").removeAttr("disabled").removeClass("grey").html("重新擷取驗證碼");}},1000);}else{alert(data.result.msbox);}}});}})//驗證碼檢查$("#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("驗證碼不可為空");}else if(this.value.length < 6){$(this).parent().next().show().html("驗證碼必須為6位元字");}})//密碼檢查$("input[name = ‘password‘]").blur(function(){if(this.value.length < 6||this.value.length > 20){$(this).parent().next().show();}else{$(this).parent().next().hide();}})//確認密碼$("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("密碼不可為空");}})//整個表單驗證$("#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";            }        }        })               })})

本文出自 “沒有翅膀的菜鳥的進階” 部落格，請務必保留此出處http://xuyran.blog.51cto.com/11641754/1861926

表單驗證js代碼