JavaScript获取验证码，60秒倒计时方法

最新推荐文章于 2024-02-03 11:02:39 发布

原创最新推荐文章于 2024-02-03 11:02:39 发布 · 440 阅读

2 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

61 篇文章

订阅专栏

Javascript

38 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的手机验证码发送功能，包括输入手机号、发送验证码按钮及倒计时机制。通过AJAX异步请求与后端交互，验证手机号的正确性并触发验证码发送。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<div class="item-input code-box">
       <input type="text" class="username form-control" id="phone" placeholder="手机号" name="phone" />
       <button type="button" id="get_code">发送验证码</button>
</div>

        //获取验证码
        var wait = 60;

        function time(o) {
            if (wait == 0) {
                o.removeAttribute("disabled");
                o.innerHTML = "获取验证码";
                wait = 60;
            } else {
                o.setAttribute("disabled", true);
                o.innerHTML = wait + "秒后重新获取";
                wait--;
                setTimeout(function () {
                    time(o)
                }, 1000)
            }
        }
        $("#get_code").on("click", function () {
            var phone = $("input[name=phone]").val();
            var _this = document.getElementById("get_code");
            if (!phone) {
                alert('请输入手机号码')
                return false;
            } else if (!(/^1[34578]\d{9}$/.test(phone))) {
                alert('请输入正确的手机号码')
                return false;
            }
            $.ajax({
                type: "GET",
                url: "url",//请求验证码服务端地址
                success: function (data) {
                    if (data.success) {
                        time(_this); //倒计时
                    } else {
                        alert(data.msg)
                    }
                }
            })
        });