当前位置：首页 > JavaScript

js验证码的实现

2026-04-03 21:37:35JavaScript

验证码的基本原理

验证码（CAPTCHA）用于区分人类用户和自动化程序，防止恶意攻击。JavaScript 实现验证码通常涉及生成随机字符或图形，并验证用户输入是否匹配。

生成随机验证码

使用 JavaScript 生成随机字符串作为验证码，通常包含数字、字母或符号：

function generateCaptcha(length = 6) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let captcha = '';
  for (let i = 0; i < length; i++) {
    captcha += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return captcha;
}
const captchaText = generateCaptcha();

渲染验证码到页面

将生成的验证码显示为文本或图形（如 Canvas）：

// 文本形式显示
document.getElementById('captcha-display').textContent = captchaText;

// Canvas 图形形式
const canvas = document.getElementById('captcha-canvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = '#333';
ctx.fillText(captchaText, 10, 30);

// 添加干扰线或噪点增强安全性
ctx.strokeStyle = '#999';
for (let i = 0; i < 5; i++) {
  ctx.beginPath();
  ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
  ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
  ctx.stroke();
}

验证用户输入

比较用户输入与生成的验证码是否一致：

js验证码的实现

function validateCaptcha() {
  const userInput = document.getElementById('captcha-input').value;
  if (userInput === captchaText) {
    alert('验证码正确！');
    return true;
  } else {
    alert('验证码错误，请重试！');
    return false;
  }
}

增强安全性措施

时效性：设置验证码过期时间（如 5 分钟）。
服务端验证：将生成的验证码存储在服务端（如 Session 或数据库），避免客户端篡改。

动态刷新：提供刷新按钮重新生成验证码：

document.getElementById('refresh-captcha').addEventListener('click', () => {
  captchaText = generateCaptcha();
  document.getElementById('captcha-display').textContent = captchaText;
});