当前位置：首页 > JavaScript

js验证码实现

2026-01-16 12:31:36JavaScript

验证码的基本原理

验证码（CAPTCHA）用于区分人类用户和自动化程序。常见类型包括图形验证码、滑动验证码、短信验证码等。JavaScript 可用于前端验证码的生成和验证逻辑。

图形验证码实现

使用 Canvas 生成随机字符验证码：

function generateCaptcha() {
  const canvas = document.getElementById('captchaCanvas');
  const ctx = canvas.getContext('2d');
  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
  let captcha = '';

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#f0f0f0';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < 6; i++) {
    const char = chars.charAt(Math.floor(Math.random() * chars.length));
    captcha += char;
    ctx.font = '30px Arial';
    ctx.fillStyle = getRandomColor();
    ctx.fillText(char, 10 + i * 25, 30);
  }

  // 添加干扰线
  for (let i = 0; i < 5; i++) {
    ctx.strokeStyle = getRandomColor();
    ctx.beginPath();
    ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.stroke();
  }

  return captcha;
}

function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

验证逻辑处理

在表单提交时验证用户输入：

let currentCaptcha = generateCaptcha();

document.getElementById('refreshCaptcha').addEventListener('click', function() {
  currentCaptcha = generateCaptcha();
});

document.getElementById('submitForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const userInput = document.getElementById('captchaInput').value;

  if (userInput.toUpperCase() === currentCaptcha) {
    alert('验证码正确');
    // 继续表单提交
  } else {
    alert('验证码错误');
    currentCaptcha = generateCaptcha();
  }
});

滑动验证码实现

基本滑动验证码的 HTML 结构：

<div class="slider-container">
  <div class="slider-bg"></div>
  <div class="slider-btn" draggable="true"></div>
</div>

JavaScript 拖动逻辑：

const sliderBtn = document.querySelector('.slider-btn');
let isDragging = false;

sliderBtn.addEventListener('mousedown', function(e) {
  isDragging = true;
});

document.addEventListener('mousemove', function(e) {
  if (!isDragging) return;

  const container = document.querySelector('.slider-container');
  const containerRect = container.getBoundingClientRect();
  let newPosition = e.clientX - containerRect.left;

  // 限制滑块在容器内移动
  newPosition = Math.max(0, Math.min(newPosition, containerRect.width - sliderBtn.offsetWidth));

  sliderBtn.style.left = newPosition + 'px';
});

document.addEventListener('mouseup', function(e) {
  if (!isDragging) return;
  isDragging = false;

  // 验证是否滑动到指定位置（如右侧80%区域）
  const container = document.querySelector('.slider-container');
  const containerWidth = container.offsetWidth;
  const btnPosition = parseInt(sliderBtn.style.left || 0);

  if (btnPosition > containerWidth * 0.8) {
    alert('验证成功');
  } else {
    sliderBtn.style.left = '0';
  }
});

短信验证码倒计时

发送短信验证码时的倒计时功能：

function startCountdown(seconds) {
  const btn = document.getElementById('sendSmsBtn');
  let remaining = seconds;

  btn.disabled = true;
  btn.textContent = `重新发送(${remaining}s)`;

  const timer = setInterval(() => {
    remaining--;
    btn.textContent = `重新发送(${remaining}s)`;

    if (remaining <= 0) {
      clearInterval(timer);
      btn.disabled = false;
      btn.textContent = '发送验证码';
    }
  }, 1000);
}

document.getElementById('sendSmsBtn').addEventListener('click', function() {
  // 模拟发送验证码
  startCountdown(60);
});

安全注意事项

前端验证码只能作为辅助验证，服务端必须进行二次验证。验证码生成逻辑应包含：

随机性足够强（避免简单数学运算）
会话绑定（每个验证码对应特定会话）
有效期限制（通常3-5分钟）
尝试次数限制（防止暴力破解）

服务端验证示例（Node.js）：

const sessionCaptchas = {};

// 生成验证码时存储
app.post('/api/captcha/generate', (req, res) => {
  const captcha = generateRandomString();
  const sessionId = req.session.id;
  sessionCaptchas[sessionId] = {
    code: captcha,
    expires: Date.now() + 300000 // 5分钟后过期
  };
  res.json({ captchaImage: generateImage(captcha) });
});

// 验证验证码
app.post('/api/captcha/verify', (req, res) => {
  const { input, sessionId } = req.body;
  const record = sessionCaptchas[sessionId];

  if (!record || record.expires < Date.now()) {
    return res.status(400).json({ error: '验证码已过期' });
  }

  if (input.toUpperCase() !== record.code) {
    return res.status(400).json({ error: '验证码错误' });
  }

  delete sessionCaptchas[sessionId];
  res.json({ success: true });
});

js验证码实现