使用原生js实现一个60秒倒计时验证码

最新推荐文章于 2023-12-13 17:24:28 发布

原创最新推荐文章于 2023-12-13 17:24:28 发布 · 433 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#原生js

Js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用原生JavaScript实现的60秒倒计时验证码功能，该功能包括手机号验证、倒计时显示及重置机制。当用户点击获取验证码按钮时，系统将检查手机号是否为空及格式是否正确，若验证通过则启动60秒倒计时，期间按钮不可再次点击，直到倒计时结束。

使用原生js实现一个60秒倒计时验证码

let getCode = document.querySelector('.getCode');

    let tel = document.querySelector('.tel');

    let error = document.querySelector('.error');

    let time = 60;

    let timer;

    getCode.onclick = function(){

       let name = tel.value; 

       if (name == "") {

           error.innerHTML='手机号不能为空!';

           setTimeout(function(){

           error.innerHTML='';

           }, 3000);

           return;

       }

       else {

       if (!(/^1[3|4|5|6|7|8|9]\d{9}$/.test(name))) {

         error.innerHTML='手机号格式有误.';

         setTimeout(function(){

           error.innerHTML='';

           }, 3000);

           return;

       }

    }

     clearInterval(timer);

     timer = setInterval(function(){   

       time--;

       getCode.innerHTML = time + "秒后重试";

       getCode.style.background="url('images/login/retry.png')";

       getCode.disabled = true;

       if (time==0) {

           time = 60;

           clearInterval(timer);

           getCode.innerHTML = "获取验证码";

           getCode.disabled = false;

       }

       },1000);

    }