原文地址：https://www.cnblogs.com/leiting/p/7604648.html

js部分

$(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;
}

html結構

<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>