JS實(shí)現(xiàn)表單驗(yàn)證功能(驗(yàn)證手機(jī)號(hào)是否存在,驗(yàn)證碼倒計(jì)時(shí))
廢話不多說直接上代碼
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">手機(jī)號(hào)</label> <div class="pull-left"> <input type="tel" autocomplete="off" class="input-control put-width440 j-telphone" id="inputtel" name="phones" placeholder="請(qǐng)輸入您的電話號(hào)碼" 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="請(qǐng)輸入密碼" 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">驗(yàn)證碼</label> <div class="pull-left"> <input type="tel" class="input-control put-with100 vericode" id="inputEmail3" name="code" placeholder="請(qǐng)輸入驗(yàn)證碼"> <input id="btnSendCode" type="button" value="免費(fèi)獲取驗(yàn)證碼" 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)">注冊(cè)</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('請(qǐng)輸入手機(jī)號(hào)碼,不能為空'); return false; }else if (!isMobile.test(phones)) { $('.tel-msg').text('請(qǐng)輸入有效的手機(jī)號(hào)碼'); return false; }else{ //手機(jī)號(hào)碼是否存在 $.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(){ } }); } }) //驗(yàn)證碼倒計(jì)時(shí) var InterValObj; //timer變量,控制時(shí)間 var count = 30; //間隔函數(shù),1秒執(zhí)行 var curCount;//當(dāng)前剩余秒數(shù) var code = ""; //驗(yàn)證碼 var regType; var phoneTemplet; var codeLength = 4;//驗(yàn)證碼長度 $(".code-btn").click(function(){ curCount = count; var phone=$.trim($(".j-telphone").val());//手機(jī)號(hào)碼 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){ //設(shè)置button效果,開始計(jì)時(shí) $("#btnSendCode").attr("disabled", "true"); $("#btnSendCode").val("請(qǐng)?jiān)? + curCount + "秒內(nèi)輸入驗(yàn)證碼"); InterValObj = window.setInterval(SetRemainTime, 1000); //啟動(dòng)計(jì)時(shí)器,1秒執(zhí)行一次 //產(chǎn)生驗(yàn)證碼 for (var i = 0; i < codeLength; i++) { code += parseInt(Math.random() * 9).toString(); } //向后臺(tái)獲驗(yàn)證碼 $.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('請(qǐng)輸入有效的手機(jī)號(hào)碼'); } }); //timer處理函數(shù) function SetRemainTime() { if (curCount == 0) { window.clearInterval(InterValObj);//停止計(jì)時(shí)器 $("#btnSendCode").removeAttr("disabled");//啟用按鈕 $("#btnSendCode").val("重新發(fā)送驗(yàn)證碼"); code = ""; //清除驗(yàn)證碼。如果不清除,過時(shí)間后,輸入收到的驗(yàn)證碼依然有效 } else { curCount--; $("#btnSendCode").val("請(qǐng)?jiān)? + curCount + "秒內(nèi)輸入驗(yàn)證碼"); } } }) </script>
以上所述是小編給大家介紹的JS實(shí)現(xiàn)表單驗(yàn)證功能(驗(yàn)證手機(jī)號(hào)是否存在,驗(yàn)證碼倒計(jì)時(shí)),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- JS實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)的注冊(cè)頁面
- JS實(shí)現(xiàn)用戶注冊(cè)時(shí)獲取短信驗(yàn)證碼和倒計(jì)時(shí)功能
- 基于JS實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼后的倒計(jì)時(shí)功能(無視頁面刷新,頁面關(guān)閉不進(jìn)行倒計(jì)時(shí)功能)
- JS/jQ實(shí)現(xiàn)免費(fèi)獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)效果
- js實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼倒計(jì)時(shí)效果
- js實(shí)現(xiàn)發(fā)送驗(yàn)證碼后的倒計(jì)時(shí)功能
- JS 實(shí)現(xiàn)獲取驗(yàn)證碼 倒計(jì)時(shí)功能
相關(guān)文章
js+css3實(shí)現(xiàn)旋轉(zhuǎn)效果
本文主要介紹了js+css3實(shí)現(xiàn)旋轉(zhuǎn)效果的方法。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01webpack學(xué)習(xí)--webpack經(jīng)典7分鐘入門教程
這篇文章主要介紹了webpack學(xué)習(xí)--webpack經(jīng)典7分鐘入門教程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06js判斷樣式className同時(shí)增加class或刪除class
用正則表達(dá)式判斷多個(gè)class之間是否存在真正的class(前后空格的處理)然后增加class刪除class,本文給予實(shí)現(xiàn)方法,感興趣的朋友可以了解下,或許對(duì)你有所幫助2013-01-01javascript實(shí)現(xiàn)帶節(jié)日和農(nóng)歷的日歷特效
這篇文章主要介紹了javascript實(shí)現(xiàn)帶節(jié)日和農(nóng)歷的日歷特效,效果十分棒,需要的朋友可以參考下2015-02-02js改變html的原有內(nèi)容實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s改變html的原有內(nèi)容實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10setTimeout()與setInterval()方法區(qū)別介紹
計(jì)時(shí)器setTimeout()和setInterval()兩個(gè)都是js的計(jì)時(shí)功能的函數(shù)兩個(gè)有些區(qū)別,下面為大家簡單介紹下,希望對(duì)大家有所幫助2013-12-12js正則表達(dá)式中test,exec,match方法的區(qū)別說明
本篇文章主要是對(duì)js正則表達(dá)式中test,exec,match方法的區(qū)別進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-01-01JavaScript高級(jí)教程5.6之基本包裝類型(詳細(xì))
在基本類型當(dāng)中,有三種類型是我們經(jīng)常使用的:boolean,number,string,通過本篇文章給大家介紹javascript高級(jí)教程5.6之基本包裝類型,感興趣的朋友一起學(xué)習(xí)吧2015-11-11