欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS设置手机验证码60s等待实现代码

程序员文章站 2022-04-10 11:36:07
 html:

 html:

<div class="input">
  <input class="tel input_all" type="text" name="tel" placeholder="手机号">
</div>
<div class="input huoqu">
  <input class="yzm input_all" type="text" name="code" placeholder="验证码">
  <button class="btn1">获取验证码</button>
</div>
<span class="error"></span>

javascript:

var btn1 = document.queryselector('.btn1');
var tel = document.queryselector('.tel');
var error = document.queryselector('.error');
var time = 60;
btn1.onclick = function(){
  var name = tel.value;  
  if (name == "") {
    error.innerhtml='手机号不能为空!';
    return;
  } 
  else {
    if (!(/^1[3|4|5|7|8]\d{9}$/.test(name))) {
      error.innerhtml='手机号格式有误.';
       return;
    }
  }
  var timer = setinterval(function(){    
    time--;
    btn1.innerhtml = time + "秒";
    btn1.disabled = true;
    if (time==0) {
      time = 60;
      clearinterval(timer); 
      btn1.innerhtml = "获取验证码";
      btn1.disabled = false;
    }
  },1000);
}

以上所述是小编给大家介绍的js设置手机验证码60s等待实现代码,希望对大家有所帮助