js實(shí)現(xiàn)登錄注冊框手機(jī)號和驗(yàn)證碼校驗(yàn)(前端部分)
開發(fā)的很多場景中都會用到手機(jī)號的校驗(yàn)和驗(yàn)證碼的校驗(yàn),具體實(shí)現(xiàn)如下
<div> <input type="text" name="phonenumber" placeholder="請輸入您的手機(jī)號碼" /> <input type="text" name="verify" placeholder="請輸入驗(yàn)證碼" /><input type="button" value="發(fā)送驗(yàn)證碼" class="verify_code" /> <input type="button" name="btn" placeholder="立即領(lǐng)取" class="btn" /> </div> <!--彈出層--> <div class="layer" style="display:none"> <p>領(lǐng)取成功</p> <img src="img/close-btn.png" class="close-btn"> </div>
$(document).ready(function(){ //點(diǎn)擊關(guān)閉按鈕關(guān)閉彈出層 $(".close-btn").click(function(){ $("layer").hide(); }); //只有再手機(jī)號和驗(yàn)證碼驗(yàn)證為有效后,點(diǎn)擊領(lǐng)取按鈕跳出彈出層事件才生效 $('[name=btn]').click(function(){ if(!validate()){ return false; } $(".layer").show(); }); //驗(yàn)證 function validate(){ //正則表達(dá)式,十一位數(shù)字的電話號碼 var phoneReg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/; //如果手機(jī)號碼輸入為空,則再輸入框后插入錯誤信息 if($('[name=phonenumber]').val==''){ $('[name=phonenumber]').after(errMsg('手機(jī)號碼不能為空!')); return false; } //驗(yàn)證輸入的電話號碼是否是11位數(shù)字 if(!phoneReg.test($('[name=phonenumber]').val())){ $('[name=phonenumber]').after(errMsg('請輸入正確的手機(jī)號碼!')); return false; } //驗(yàn)證碼不為空驗(yàn)證 if($('[name=verify]').val==''){ $('[name=verify]').after(errMsg('驗(yàn)證碼不能為空!')); return false; } $('.error').remove(); return true;} //點(diǎn)擊發(fā)送驗(yàn)證碼按鈕,進(jìn)行倒計(jì)時 $('.verify_code').on('',function(){ if(!this.b){ setTimer(); this.b=true; } }) //倒計(jì)時 function setTimer(){ var time=60; var timers=setInterval(function(){ time--; if(time <= 0){ time=0; console.log(time); $('.verify_code').eq(0)[0].b=false; $('.verify_code').val('獲取驗(yàn)證碼'); clearInterval(timers); return false; } $('.verify_code).val( time+ '秒后重新獲取'); },1000) } //錯誤信息顯示 function errMsg(html){ $('.error').remove(); var str='<div class="error">*'+html+'</div>'; return str; } });
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
深入淺析JavaScript面向?qū)ο蠛驮秃瘮?shù)
這篇文章主要介紹了深入淺析JavaScript面向?qū)ο蠛驮秃瘮?shù)的相關(guān)資料,需要的朋友可以參考下2016-02-02二級域名或跨域共享Cookies的實(shí)現(xiàn)方法
適用于Asp。 在主域名設(shè)置的Cookie,在各子域名共用;適用于博客等提供二級域名。這個問題,以網(wǎng)上有眾多帖子,可惜都沒有完整解決。2008-08-08js實(shí)現(xiàn)按Ctrl+Enter發(fā)送效果
按Ctrl+Enter發(fā)送,思路是監(jiān)聽textarea的onkeydown事件,當(dāng)ctrl鍵被按下,并且,keycode為13(回車),時,調(diào)用發(fā)送表單的函數(shù)2014-09-09javascript 不停(setInterval)/延時(setTimeout)函數(shù)使用實(shí)例
如果想實(shí)現(xiàn)頁面的一些函數(shù)的定時執(zhí)行,需要用到下面的函數(shù)大家可以看下用法。2009-08-08微信小程序使用picker實(shí)現(xiàn)時間和日期選擇框功能【附源碼下載】
這篇文章主要介紹了微信小程序使用picker實(shí)現(xiàn)時間和日期選擇框功能,結(jié)合實(shí)例形式分析了微信小程序picker組件進(jìn)行日期與時間選擇的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12js實(shí)現(xiàn)加載頁面就自動觸發(fā)超鏈接的示例
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)加載頁面就自動觸發(fā)超鏈接的示例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08原生javaScript做得動態(tài)表格(注釋寫的很清楚)
因?yàn)榭垂竞枚嘤脛討B(tài)表格的,所以,我就試著用js做了動態(tài)表格,下面有個不錯的示例,感興趣的朋友可以參考下2013-12-12JS實(shí)現(xiàn)省市縣三級下拉聯(lián)動
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)省市縣三級下拉聯(lián)動,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-04-04