当前位置：首页 > JavaScript

js实现简单的验证码

2026-03-02 01:30:43JavaScript

生成随机验证码

使用Math.random()生成随机字符或数字组合，可自定义长度和字符集：

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

渲染验证码到页面

通过Canvas绘制带干扰线的验证码，增强安全性：

function renderCaptcha(captchaText, canvasId) {
  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();
  }

  // 绘制验证码文本
  ctx.font = '30px Arial';
  ctx.fillStyle = '#000';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(captchaText, canvas.width/2, canvas.height/2);
}

验证用户输入

比较用户输入与生成的验证码（不区分大小写）：

js实现简单的验证码

function validateCaptcha(inputValue, generatedCaptcha) {
  return inputValue.toLowerCase() === generatedCaptcha.toLowerCase();
}

完整实现示例

HTML部分：

<canvas id="captchaCanvas" width="200" height="60"></canvas>
<input type="text" id="userInput" placeholder="输入验证码">
<button onclick="checkCaptcha()">验证</button>
<button onclick="refreshCaptcha()">刷新</button>
<p id="result"></p>

JavaScript部分：

js实现简单的验证码

let currentCaptcha = generateCaptcha();

// 初始化验证码
window.onload = function() {
  renderCaptcha(currentCaptcha, 'captchaCanvas');
};

// 刷新验证码
function refreshCaptcha() {
  currentCaptcha = generateCaptcha();
  renderCaptcha(currentCaptcha, 'captchaCanvas');
  document.getElementById('userInput').value = '';
  document.getElementById('result').textContent = '';
}

// 验证用户输入
function checkCaptcha() {
  const userInput = document.getElementById('userInput').value;
  const isValid = validateCaptcha(userInput, currentCaptcha);
  document.getElementById('result').textContent = isValid 
    ? '验证成功' 
    : '验证失败';
}

增强安全性措施

验证码应存储在服务端Session中，前端实现仅作为辅助验证。实际项目中建议：

结合后端生成和验证
添加时效性限制（如5分钟过期）
限制尝试次数防止暴力破解
使用更复杂的图形干扰元素

可访问性考虑

为方便视障用户，可提供音频验证码选项：

function speakCaptcha(captchaText) {
  const utterance = new SpeechSynthesisUtterance(captchaText.replace(/(\d)/g, '$1 '));
  window.speechSynthesis.speak(utterance);
}