js實(shí)現(xiàn)登錄注冊(cè)框手機(jī)號(hào)和驗(yàn)證碼校驗(yàn)(前端部分)
更新時(shí)間:2017年09月28日 15:49:29 作者:檸檬8
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)登錄注冊(cè)框手機(jī)號(hào)和驗(yàn)證碼校驗(yàn)的前端部分代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
開發(fā)的很多場(chǎng)景中都會(huì)用到手機(jī)號(hào)的校驗(yàn)和驗(yàn)證碼的校驗(yàn),具體實(shí)現(xiàn)如下
<div> <input type="text" name="phonenumber" placeholder="請(qǐng)輸入您的手機(jī)號(hào)碼" /> <input type="text" name="verify" placeholder="請(qǐng)輸入驗(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ī)號(hào)和驗(yàn)證碼驗(yàn)證為有效后,點(diǎn)擊領(lǐng)取按鈕跳出彈出層事件才生效
$('[name=btn]').click(function(){
if(!validate()){
return false;
}
$(".layer").show();
});
//驗(yàn)證
function validate(){
//正則表達(dá)式,十一位數(shù)字的電話號(hào)碼
var phoneReg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/;
//如果手機(jī)號(hào)碼輸入為空,則再輸入框后插入錯(cuò)誤信息
if($('[name=phonenumber]').val==''){
$('[name=phonenumber]').after(errMsg('手機(jī)號(hào)碼不能為空!'));
return false;
}
//驗(yàn)證輸入的電話號(hào)碼是否是11位數(shù)字
if(!phoneReg.test($('[name=phonenumber]').val())){
$('[name=phonenumber]').after(errMsg('請(qǐng)輸入正確的手機(jī)號(hào)碼!'));
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ì)時(shí)
$('.verify_code').on('',function(){
if(!this.b){
setTimer();
this.b=true;
}
})
//倒計(jì)時(shí)
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)
}
//錯(cuò)誤信息顯示
function errMsg(html){
$('.error').remove();
var str='<div class="error">*'+html+'</div>';
return str;
}
});
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap3 datetimepicker控件使用實(shí)例
這篇文章主要為大家詳細(xì)介紹了Bootstrap3 datetimepicker控件使用實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
JS簡(jiǎn)單實(shí)現(xiàn)動(dòng)畫彈出層效果
本文給大家介紹的是是一款javascript彈出層特效,支持點(diǎn)擊觸發(fā)js彈出層,滑過觸發(fā)js彈出層,帶動(dòng)畫效果js彈出層,可自定義函數(shù)回調(diào)js彈出層。2015-05-05
Express框架Router?Route?Layer對(duì)象使用示例詳解
這篇文章主要為大家介紹了Express框架Router?Route?Layer對(duì)象使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
微信公眾號(hào)-獲取用戶信息(網(wǎng)頁(yè)授權(quán)獲?。?shí)現(xiàn)步驟
這篇文章主要介紹了微信公眾號(hào)-獲取用戶信息(網(wǎng)頁(yè)授權(quán)獲?。?shí)現(xiàn)步驟的相關(guān)資料,需要的朋友可以參考下2016-10-10
微信小程序?qū)崿F(xiàn)簡(jiǎn)單的吸頂效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單的吸頂效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05

