当前位置：首页 > JavaScript

js如何实现验证码

2026-03-01 11:06:50JavaScript

实现验证码的基本方法

在JavaScript中实现验证码通常涉及生成随机字符串或数字，并将其显示在页面上供用户输入验证。以下是几种常见的实现方式：

使用Canvas生成图形验证码

通过Canvas绘制随机字符和干扰线，增加机器识别的难度：

js如何实现验证码

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

  // 生成随机字符
  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
  let captchaText = '';
  for (let i = 0; i < 6; i++) {
    captchaText += chars.charAt(Math.floor(Math.random() * chars.length));
  }

  // 绘制字符
  ctx.font = '30px Arial';
  ctx.fillStyle = '#000';
  ctx.fillText(captchaText, 10, 30);

  // 添加干扰线
  for (let i = 0; i < 5; i++) {
    ctx.strokeStyle = `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255})`;
    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 captchaText;
}

纯文本验证码实现

简单的文本验证码适合基础需求：

function generateTextCaptcha() {
  const chars = '0123456789';
  let result = '';
  for (let i = 0; i < 4; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  document.getElementById('captchaDisplay').textContent = result;
  return result;
}

验证码验证逻辑

验证用户输入是否匹配生成的验证码：

js如何实现验证码

function validateCaptcha(input, storedCaptcha) {
  return input.toLowerCase() === storedCaptcha.toLowerCase();
}

// 使用示例
const currentCaptcha = generateCaptcha();
const userInput = document.getElementById('captchaInput').value;
if (!validateCaptcha(userInput, currentCaptcha)) {
  alert('验证码错误');
}

增强安全性措施

为防止自动化工具破解验证码，可采取以下措施：

限制验证码尝试次数，超过阈值后锁定或延迟响应
定期更新验证码生成算法
结合服务端验证，即使前端验证通过仍需后端确认
添加时间戳验证，设置验证码有效期

滑动验证码替代方案

对于更高级的需求，可以考虑实现滑动验证码：

function initSliderCaptcha() {
  const slider = document.getElementById('slider');
  const sliderButton = document.getElementById('sliderButton');
  let isVerified = false;

  sliderButton.addEventListener('mousedown', startDrag);

  function startDrag(e) {
    if (isVerified) return;
    document.addEventListener('mousemove', drag);
    document.addEventListener('mouseup', stopDrag);
  }

  function drag(e) {
    const sliderRect = slider.getBoundingClientRect();
    let newPosition = e.clientX - sliderRect.left;
    newPosition = Math.max(0, Math.min(newPosition, sliderRect.width - 20));
    sliderButton.style.left = `${newPosition}px`;
  }

  function stopDrag() {
    document.removeEventListener('mousemove', drag);
    const finalPosition = parseInt(sliderButton.style.left || '0');
    if (finalPosition > slider.offsetWidth - 30) {
      isVerified = true;
      sliderButton.textContent = '✓';
    } else {
      sliderButton.style.left = '0';
    }
  }
}

这些方法可以根据实际需求组合使用，建议在重要操作中结合服务端验证以提高安全性。