当前位置：首页 > JavaScript

用js实现验证码

2026-04-04 09:35:14JavaScript

用js实现验证码

验证码生成与验证实现

生成随机验证码字符串

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;
}

绘制图形验证码

function drawCaptcha(canvasId, captchaText) {
  const canvas = document.getElementById(canvasId);
  const ctx = canvas.getContext('2d');

  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 背景色
  ctx.fillStyle = '#f5f5f5';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 绘制干扰线
  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();
  }

  // 绘制验证码文本
  for (let i = 0; i < captchaText.length; i++) {
    ctx.fillStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
    ctx.font = `${20 + Math.random() * 10}px Arial`;
    ctx.fillText(
      captchaText[i],
      10 + i * 25,
      30 + Math.random() * 10
    );
  }
}

验证用户输入

function validateCaptcha(inputId, storedCaptcha) {
  const userInput = document.getElementById(inputId).value;
  return userInput === storedCaptcha;
}

完整示例实现

<!DOCTYPE html>
<html>
<head>
  <title>验证码示例</title>
  <style>
    #captchaCanvas {
      border: 1px solid #ddd;
      margin: 10px 0;
    }
    button {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div>
    <canvas id="captchaCanvas" width="200" height="50"></canvas>
    <button onclick="refreshCaptcha()">刷新验证码</button>
  </div>
  <div>
    <input type="text" id="captchaInput" placeholder="请输入验证码">
    <button onclick="checkCaptcha()">验证</button>
  </div>
  <p id="result"></p>

  <script>
    let currentCaptcha = '';

    function initCaptcha() {
      currentCaptcha = generateCaptcha();
      drawCaptcha('captchaCanvas', currentCaptcha);
    }

    function refreshCaptcha() {
      currentCaptcha = generateCaptcha();
      drawCaptcha('captchaCanvas', currentCaptcha);
      document.getElementById('result').textContent = '';
    }

    function checkCaptcha() {
      const isValid = validateCaptcha('captchaInput', currentCaptcha);
      document.getElementById('result').textContent = isValid 
        ? '验证通过' 
        : '验证码错误';
    }

    // 初始化
    window.onload = initCaptcha;
  </script>
</body>
</html>

安全增强建议

服务端应存储验证码并与用户提交的进行比对
设置验证码过期时间（通常1-5分钟）
限制验证码尝试次数防止暴力破解
考虑添加滑动验证等更复杂的验证方式

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

const express = require('express');
const session = require('express-session');
const app = express();

app.use(session({
  secret: 'your-secret-key',
  resave: false,
  saveUninitialized: true
}));

// 生成验证码接口
app.get('/captcha', (req, res) => {
  const captcha = generateCaptcha();
  req.session.captcha = captcha;
  req.session.captchaExpire = Date.now() + 300000; // 5分钟后过期

  // 这里应该返回图形验证码，简化示例只返回文本
  res.json({ captcha });
});

// 验证接口
app.post('/validate', express.json(), (req, res) => {
  const { captcha } = req.body;
  if (!req.session.captcha || Date.now() > req.session.captchaExpire) {
    return res.json({ valid: false, message: '验证码已过期' });
  }

  const isValid = captcha === req.session.captcha;
  if (isValid) {
    req.session.captcha = null; // 验证成功后清除
  }

  res.json({ valid: isValid });
});

app.listen(3000, () => console.log('Server running on port 3000'));