当前位置：首页 > JavaScript

js实现登录验证码

2026-01-30 18:01:02JavaScript

实现登录验证码的步骤

生成随机验证码

使用JavaScript生成随机验证码字符串，通常包含数字和字母组合。可以定义一个函数来生成指定长度的验证码：

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

在页面上显示验证码

将生成的验证码显示在HTML页面上，通常使用canvas绘制验证码图像以增加安全性：

function drawCaptcha(captchaText) {
  const canvas = document.getElementById('captchaCanvas');
  const ctx = canvas.getContext('2d');
  ctx.clearRect(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.fillText(captchaText, canvas.width/2, canvas.height/2 + 10);
}

验证用户输入

在表单提交时验证用户输入的验证码是否匹配：

document.getElementById('loginForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const userInput = document.getElementById('captchaInput').value;
  const storedCaptcha = sessionStorage.getItem('captcha');

  if (userInput !== storedCaptcha) {
    alert('验证码错误，请重新输入');
    refreshCaptcha();
    return false;
  }

  // 验证通过，继续登录流程
  this.submit();
});

刷新验证码功能

提供刷新验证码的功能，增强用户体验：

function refreshCaptcha() {
  const newCaptcha = generateCaptcha();
  sessionStorage.setItem('captcha', newCaptcha);
  drawCaptcha(newCaptcha);
  document.getElementById('captchaInput').value = '';
}

HTML结构示例

配套的HTML结构可以这样设计：

<form id="loginForm">
  <input type="text" placeholder="用户名" required>
  <input type="password" placeholder="密码" required>

  <div class="captcha-container">
    <canvas id="captchaCanvas" width="150" height="50"></canvas>
    <button type="button" onclick="refreshCaptcha()">刷新</button>
  </div>

  <input type="text" id="captchaInput" placeholder="输入验证码" required>
  <button type="submit">登录</button>
</form>

初始化验证码

页面加载时初始化验证码：

window.onload = function() {
  const initialCaptcha = generateCaptcha();
  sessionStorage.setItem('captcha', initialCaptcha);
  drawCaptcha(initialCaptcha);
};