jquery实现手机发送验证码的倒计时代码

admin 2026年02月13日 20:32 105 0

jQuery实现手机验证码发送及倒计时功能：绑定发送按钮点击事件，校验手机号格式后模拟发送请求（实际可替换为接口调用）；触发倒计时，禁用按钮并显示剩余秒数，通过setInterval每秒更新倒计时值；倒计时结束后恢复按钮可点击状态，清空定时器，核心逻辑包括事件监听、表单校验、定时器控制及DOM状态切换，确保用户体验流畅且避免重复发送。

使用jQuery实现手机验证码发送倒计时功能详解

在移动端应用或网页注册/登录场景中，手机验证码已成为验证用户身份的主流方式，为了防止用户频繁发送验证码、提升系统安全性并优化用户体验，通常会在发送验证码后设置倒计时功能（如60秒内不可重复发送），本文将详细介绍如何使用jQuery结合HTML和CSS，快速实现手机验证码发送的倒计时交互效果,包含完整的代码示例和逻辑解析。

实现思路

基础结构：创建手机号输入框、发送验证码按钮及倒计时显示元素,确保界面简洁直观。
事件绑定：监听发送按钮的点击事件，触发验证码发送逻辑,同时处理用户交互反馈。
倒计时核心：点击后禁用按钮，启动定时器每秒更新倒计时文本，倒计时结束后恢复按钮状态,防止重复提交。
辅助功能：添加手机号格式校验，模拟发送验证码的反馈（实际项目中需对接后端接口）,并提供清晰的用户提示。

完整代码实现

HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">jQuery验证码倒计时示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h2>手机验证码发送</h2>
        <div class="input-group">
            <input type="tel" id="phone" placeholder="请输入手机号" maxlength="11" autocomplete="off">
            <button id="sendCode" class="btn-send">发送验证码</button>
        </div>
        <p class="tip" id="tip" role="alert"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS样式

/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}
.container {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}
h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
    font-weight: 500;
}
.input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}
#phone {
    flex: 1;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    transition: all 0.3s ease;
}
#phone:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.btn-send {
    padding: 12px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.btn-send:hover:not(:disabled) {
    background-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.btn-send:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}
.btn-send:disabled {
    background-color: #e0e0e0;
    cursor: not-allowed;
    color: #999;
}
.tip {
    text-align: center;
    font-size: 14px;
    color: #666;
    min-height: 20px;
    margin-top: 5px;
    transition: color 0.3s ease;
}
.tip.error {
    color: #ff4d4f;
}
.tip.success {
    color: #52c41a;
}
/* 响应式设计 */
@media (max-width: 480px) {
    .container {
        padding: 20px;
    }
    .input-group {
        flex-direction: column;
    }
    .btn-send {
        width: 100%;
    }
}

jQuery逻辑

// script.js
$(function() {
    const $sendBtn = $('#sendCode');
    const $phoneInput = $('#phone');
    const $tip = $('#tip');
    let countdown = 60; // 倒计时秒数
    let timer = null; // 存储定时器ID
    let isSending = false; // 防止重复发送的标志
    // 手机号正则表达式（简单校验11位数字）
    const phoneRegex = /^1[3-9]\d{9}$/;
    // 发送验证码按钮点击事件
    $sendBtn.on('click', function() {
        // 防止重复点击
        if (isSending) return;
        const phone = $phoneInput.val().trim();
        // 1. 校验手机号格式
        if (!phone) {
            showTip('请输入手机号', 'error');
            return;
        }
        if (!phoneRegex.test(phone)) {
            showTip('手机号格式不正确', 'error');
            return;
        }
        // 2. 模拟发送验证码（实际项目中调用后端接口）
        isSending = true;
        showTip('验证码已发送，请注意查收', 'success');
        console.log(`模拟向手机号 ${phone} 发送验证码`);
        // 3. 禁用按钮，启动倒计时
        $sendBtn.prop('disabled', true).text(countdown + 's后重发');
        timer = setInterval(function() {
            countdown--;
            if (countdown <= 0) {
                // 倒计时结束，清除定时器，恢复按钮状态
                clearInterval(timer);
                $sendBtn.prop('disabled', false).text('发送验证码');
                countdown = 60; // 重置倒计时
                isSending = false; // 重置发送状态
            } else {
                $sendBtn.text(countdown + 's后重发');
            }
        }, 1000);
    });
    // 输入框内容变化时清除错误提示
    $phoneInput.on('input', function() {
        showTip('', '');
    });
    // 封装提示信息显示函数
    function showTip(message, type) {
        $tip.text(message).removeClass('error success').addClass(type);
    }
});