当前位置：首页 > JavaScript

js实现验证码刷新

2026-04-04 11:48:41JavaScript

实现验证码刷新的方法

在JavaScript中实现验证码刷新通常涉及重新生成验证码图片或文本，并更新页面显示。以下是几种常见方法：

使用图片验证码刷新

通过修改图片URL参数强制浏览器重新加载验证码图片：

js实现验证码刷新

function refreshCaptcha() {
    const captchaImg = document.getElementById('captcha-img');
    captchaImg.src = '/captcha?' + new Date().getTime();
}

使用Canvas生成验证码

创建动态Canvas验证码并实现刷新功能：

js实现验证码刷新

let captchaText = '';
function generateCaptcha() {
    const canvas = document.getElementById('captcha-canvas');
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 生成随机验证码文本
    captchaText = Math.random().toString(36).substr(2, 6).toUpperCase();

    // 绘制验证码
    ctx.fillStyle = '#f3f3f3';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.font = '24px Arial';
    ctx.fillStyle = '#000';
    ctx.fillText(captchaText, 10, 30);
}

// 初始化生成验证码
generateCaptcha();

// 刷新验证码
document.getElementById('refresh-btn').addEventListener('click', generateCaptcha);

使用AJAX请求新验证码

从服务器获取新的验证码数据：

function refreshCaptcha() {
    fetch('/api/captcha')
        .then(response => response.json())
        .then(data => {
            document.getElementById('captcha-img').src = data.imageUrl;
            document.getElementById('captcha-token').value = data.token;
        });
}

结合SVG的验证码实现

使用SVG创建可刷新的验证码：

function generateSVGCaptcha() {
    const svgContainer = document.getElementById('svg-captcha');
    const randomText = Math.random().toString(36).substr(2, 5);

    svgContainer.innerHTML = `
        <svg width="150" height="50">
            <rect width="100%" height="100%" fill="#f5f5f5"/>
            <text x="20" y="30" font-family="Arial" font-size="20" fill="#333">
                ${randomText}
            </text>
            <line x1="10" y1="40" x2="140" y2="10" stroke="#666" stroke-width="1"/>
        </svg>
    `;
}