廢話不多說直接上代碼
html代碼:
<form method="post" id="form_hroizon" enctype="multipart/form-data" action="/"><input type="hidden" name="phoneTemplet" id="phoneTemplet"><input type="hidden" name="regType" id="regType"><div class="c-login-input"><div class="form-group"><label for="inputEmail3" class="label-control label-width120 pull-left t-r-f f16">手機號</label><div class="pull-left"><input type="tel" autocomplete="off" class="input-control put-width440 j-telphone" id="inputtel" name="phones" placeholder="請輸入您的電話號碼" value=""><span class="f12 red tel-msg"></span><div class="c-login-errtips" style="display:none;"></div></div></div><div class="form-group"><label for="inputEmail3" class="label-control label-width120 pull-left t-r-f f16">登錄密碼</label><div class="pull-left"><input type="password" class="input-control put-width440 fistpwd" id="inputpwd" name="password" placeholder="請輸入密碼" value=""><span class="f12 red pwd-msg"></span></div></div><div class="form-group"><label for="inputEmail3" class="label-control label-width120 pull-left t-r-f f16">驗證碼</label><div class="pull-left"><input type="tel" class="input-control put-with100 vericode" id="inputEmail3" name="code" placeholder="請輸入驗證碼"><input id="btnSendCode" type="button" value="免費獲取驗證碼" class="j-getcode f12 b-i-k btn code-btn c-p" /><span class="f12 red code-msg"></span></div></div></div><div class="form-group"><a class="j-sends" type="submit" name="submit" target="_self" href="javascript:void(0)">注冊</a></div></form>
JS代碼:
<script type="text/javascript">$(function(){$(".j-sends").click(function(){var phones = $.trim($(".j-telphone").val());var isMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+/d{8})$/;if(!phones){$('.tel-msg').text('請輸入手機號碼,不能為空');return false;}else if (!isMobile.test(phones)) {$('.tel-msg').text('請輸入有效的手機號碼');return false;}else{//手機號碼是否存在$.ajax({url : "/", //type:"post",dataType:"JSON",data:{phones: phones,}, contentType:'application/json;charset=UTF-8', //async: false,success:function(data){if (data.flag == "1") { //$('.tel-msg').html(data.errorInfo); //return false;}else{$('.tel-msg').html(data.errorInfo); //可}},error:function(){}}); }})//驗證碼倒計時 var InterValObj; //timer變量,控制時間 var count = 30; //間隔函數,1秒執行 var curCount;//當前剩余秒數 var code = ""; //驗證碼 var regType;var phoneTemplet;var codeLength = 4;//驗證碼長度 $(".code-btn").click(function(){curCount = count; var phone=$.trim($(".j-telphone").val());//手機號碼 var isMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+/d{8})$/;var jtel = $(".j-telphone");if(phone != "" && isMobile.test(phone) && phone.length==11){ //設置button效果,開始計時 $("#btnSendCode").attr("disabled", "true"); $("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼"); InterValObj = window.setInterval(SetRemainTime, 1000); //啟動計時器,1秒執行一次 //產生驗證碼 for (var i = 0; i < codeLength; i++) { code += parseInt(Math.random() * 9).toString(); } //向后臺獲驗證碼 $.ajax({ url : base + "/", type: "POST",// dataType: "text", // data: "phones=" + phone + "&code=" + code, dataType: "JSON",data:{phones:phone,code: code,regType:"1",phoneTemplet:"phone_uc"},success: function (data){if(data.flag=="F"){$(".code-msg").html(data.errorInfo); }else{$(".code-msg").html(data.errorInfo);}} }); }else{ $('.tel-msg').text('請輸入有效的手機號碼'); } });//timer處理函數 function SetRemainTime() { if (curCount == 0) { window.clearInterval(InterValObj);//停止計時器 $("#btnSendCode").removeAttr("disabled");//啟用按鈕 $("#btnSendCode").val("重新發送驗證碼"); code = ""; //清除驗證碼。如果不清除,過時間后,輸入收到的驗證碼依然有效 } else { curCount--; $("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼"); } } })</script>以上所述是小編給大家介紹的JS實現表單驗證功能(驗證手機號是否存在,驗證碼倒計時),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答