欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)登錄注冊框手機(jī)號和驗(yàn)證碼校驗(yàn)(前端部分)

 更新時間:2017年09月28日 15:49:29   作者:檸檬8  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)登錄注冊框手機(jī)號和驗(yàn)證碼校驗(yàn)的前端部分代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

開發(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)文章

最新評論