開發的很多場景中都會用到手機號的校驗和驗證碼的校驗,具體實現如下
<div> <input type="text" name="phonenumber" placeholder="請輸入您的手機號碼" /> <input type="text" name="verify" placeholder="請輸入驗證碼" /><input type="button" value="發送驗證碼" class="verify_code" /> <input type="button" name="btn" placeholder="立即領取" class="btn" /></div><!--彈出層--><div class="layer" style="display:none"> <p>領取成功</p> <img src="img/close-btn.png" class="close-btn"></div>
$(document).ready(function(){//點擊關閉按鈕關閉彈出層  $(".close-btn").click(function(){   $("layer").hide();  });//只有再手機號和驗證碼驗證為有效后,點擊領取按鈕跳出彈出層事件才生效  $('[name=btn]').click(function(){     if(!validate()){    return false;    }    $(".layer").show();  });//驗證function validate(){//正則表達式,十一位數字的電話號碼  var phoneReg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/;//如果手機號碼輸入為空,則再輸入框后插入錯誤信息if($('[name=phonenumber]').val==''){    $('[name=phonenumber]').after(errMsg('手機號碼不能為空!'));    return false;  }//驗證輸入的電話號碼是否是11位數字if(!phoneReg.test($('[name=phonenumber]').val())){$('[name=phonenumber]').after(errMsg('請輸入正確的手機號碼!'));    return false;}//驗證碼不為空驗證if($('[name=verify]').val==''){    $('[name=verify]').after(errMsg('驗證碼不能為空!'));    return false;}$('.error').remove();return true;}//點擊發送驗證碼按鈕,進行倒計時$('.verify_code').on('',function(){ if(!this.b){  setTimer();  this.b=true;}})//倒計時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('獲取驗證碼');  clearInterval(timers);return false; }$('.verify_code).val( time+ '秒后重新獲取');},1000)}//錯誤信息顯示function errMsg(html){  $('.error').remove();  var str='<div class="error">*'+html+'</div>';  return str;}});以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答