JS 验证码|极客笔记

JS 验证码

验证码是一种常用的验证机制，用于确保用户是合法的，并且可以有效防止恶意行为，比如恶意注册、暴力破解等。在前端开发中，我们可以通过 JavaScript 来生成和验证验证码。

在本文中，我们将讨论如何使用 JavaScript 来生成和验证验证码，并且提供一些示例代码供参考。

生成验证码

生成验证码的过程可以分为两步：生成随机验证码字符串和将验证码字符串绘制到 Canvas 上。

生成随机验证码字符串

在 JavaScript 中，可以使用以下函数来生成指定长度的随机验证码字符串：

function generateRandomCode(length) {
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let code = '';
  for (let i = 0; i < length; i++) {
    code += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return code;
}

// 生成长度为 6 的随机验证码
const code = generateRandomCode(6);
console.log(code);

以上代码中，generateRandomCode 函数接受一个参数 length，用于指定生成验证码的长度。函数内部使用了包含大小写字母和数字的字符集，通过循环遍历字符集并随机选择字符来生成验证码字符串。最后通过调用该函数来生成长度为 6 的验证码，并将验证码字符串打印到控制台。

绘制验证码到 Canvas

在网页上显示验证码通常会使用 Canvas 元素。以下是一个示例代码，演示如何使用 Canvas 来绘制验证码：

const canvas = document.getElementById('captcha');
const ctx = canvas.getContext('2d');

// 设置 Canvas 尺寸
canvas.width = 200;
canvas.height = 100;

// 设置 Canvas 样式
ctx.fillStyle = '#f8f8f8';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = '48px Arial';
ctx.fillStyle = '#333';
ctx.textBaseline = 'middle';
ctx.fillText(code, 50, 50);

以上代码中，我们首先获取一个 id 为 captcha 的 Canvas 元素，并获取到绘图上下文 ctx。然后设置 Canvas 的宽度和高度，并使用 fillRect 方法填充背景色。接着设置字体样式、颜色、垂直对齐方式，最后通过 fillText 方法将生成的验证码字符串绘制到 Canvas 上。

验证验证码

生成验证码之后，我们需要将用户输入的验证码与生成的验证码进行比较，以验证用户输入是否正确。

获取用户输入

在页面上，通常会有一个输入框用于用户输入验证码。以下是一个简单的示例代码：

<input type="text" id="userInput">
<button onclick="verifyCode()">验证</button>
<div id="result"></div>

以上代码中，通过一个输入框 userInput 获取用户输入的验证码，通过一个按钮触发 verifyCode 函数进行验证，并通过一个 result 元素显示验证结果。

验证用户输入

接下来是验证用户输入的代码：

function verifyCode() {
  const userInput = document.getElementById('userInput').value;
  if (userInput === code) {
    document.getElementById('result').innerText = '验证通过！';
  } else {
    document.getElementById('result').innerText = '验证失败，请重新输入！';
  }
}

在 verifyCode 函数中，首先获取用户输入的验证码，然后与生成的验证码进行比较。如果用户输入的验证码与生成的验证码一致，则显示“验证通过！”提示，否则显示“验证失败，请重新输入！”提示。

完整示例

以下是一个完整的示例代码，包括生成验证码和验证验证码的全过程：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>验证码示例</title>
</head>
<body>
  <canvas id="captcha"></canvas>
  <input type="text" id="userInput">
  <button onclick="verifyCode()">验证</button>
  <div id="result"></div>

  <script>
    // 生成随机验证码
    function generateRandomCode(length) {
      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      let code = '';
      for (let i = 0; i < length; i++) {
        code += characters.charAt(Math.floor(Math.random() * characters.length));
      }
      return code;
    }

    // 生成长度为 6 的随机验证码
    const code = generateRandomCode(6);

    // 绘制验证码到 Canvas
    const canvas = document.getElementById('captcha');
    const ctx = canvas.getContext('2d');
    canvas.width = 200;
    canvas.height = 100;
    ctx.fillStyle = '#f8f8f8';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.font = '48px Arial';
    ctx.fillStyle = '#333';
    ctx.textBaseline = 'middle';
    ctx.fillText(code, 50, 50);

    // 验证用户输入
    function verifyCode() {
      const userInput = document.getElementById('userInput').value;
      if (userInput === code) {
        document.getElementById('result').innerText = '验证通过！';
      } else {
        document.getElementById('result').innerText = '验证失败，请重新输入！';
      }
    }
  </script>
</body>
</html>

在这个示例中，通过生成随机验证码和绘制验证码到 Canvas，实现了一个完整的验证码功能。用户可以在输入框中输入验证码，并通过点击按钮进行验证，最终页面会显示验证结果。