当前位置：首页 > JavaScript

js实现验证码刷新

2026-03-01 11:05:10JavaScript

实现验证码刷新的JavaScript方法

验证码刷新通常通过重新生成验证码图片或更换验证码内容实现。以下是几种常见方法：

HTML结构示例

<div class="captcha-container">
  <img id="captchaImage" src="/captcha" alt="验证码">
  <button id="refreshCaptcha">刷新验证码</button>
</div>

方法一：修改图片URL添加随机参数

js实现验证码刷新

document.getElementById('refreshCaptcha').addEventListener('click', function() {
  const captchaImage = document.getElementById('captchaImage');
  captchaImage.src = '/captcha?' + new Date().getTime();
});

方法二：通过AJAX请求新验证码

document.getElementById('refreshCaptcha').addEventListener('click', function() {
  fetch('/api/new-captcha')
    .then(response => response.json())
    .then(data => {
      document.getElementById('captchaImage').src = data.imageUrl;
      document.getElementById('hiddenCaptchaToken').value = data.token;
    });
});

方法三：Canvas生成客户端验证码

js实现验证码刷新

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

  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
  let captchaText = '';
  for(let i = 0; i < 4; i++) {
    captchaText += chars.charAt(Math.floor(Math.random() * chars.length));
  }

  ctx.font = '30px Arial';
  ctx.fillText(captchaText, 10, 30);
  document.getElementById('captchaText').value = captchaText;
}

document.getElementById('refreshCaptcha').addEventListener('click', generateCaptcha);

注意事项

服务端验证码接口应防止重复请求
客户端生成验证码安全性较低，建议配合服务端验证
添加防抖机制防止频繁刷新
考虑添加加载状态提示

完整示例（服务端配合方案）

let refreshLock = false;

document.getElementById('refreshCaptcha').addEventListener('click', function() {
  if(refreshLock) return;

  refreshLock = true;
  const captchaImage = document.getElementById('captchaImage');
  captchaImage.style.opacity = '0.5';

  const timestamp = new Date().getTime();
  captchaImage.src = `/captcha?t=${timestamp}`;

  captchaImage.onload = function() {
    refreshLock = false;
    captchaImage.style.opacity = '1';
  };
});