如何在 JS 中轻松实现验证码输入框？

2023-12-10 12:22:11

验证码输入框的重要性

验证码输入框是一个包含随机字符或数字的输入框，用户需要在提交表单或执行某些操作之前输入这些字符或数字。验证码输入框用于防止网络钓鱼、垃圾邮件和暴力破解攻击。它通过向用户提出一个简单的任务来区分人类和机器人，从而保护网站或应用程序的安全。

如何使用 JavaScript 创建验证码输入框

创建输入框元素。
```
<input type="text" id="captcha-input">
```
创建一个画布元素。
```
<canvas id="captcha-canvas"></canvas>
```

获取画布元素的上下文。

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

生成随机验证码。

const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
let captcha = "";
for (let i = 0; i < 6; i++) {
  captcha += characters[Math.floor(Math.random() * characters.length)];
}

在画布上绘制验证码。

ctx.font = "20px Arial";
ctx.fillText(captcha, 10, 30);

将生成的验证码存储在隐藏的输入框中。

const hiddenInput = document.createElement("input");
hiddenInput.type = "hidden";
hiddenInput.name = "captcha";
hiddenInput.value = captcha;
document.body.appendChild(hiddenInput);

添加事件监听器以验证用户输入的验证码。

document.getElementById("captcha-input").addEventListener("input", function() {
  const enteredCaptcha = this.value;
  const hiddenInput = document.querySelector('input[name="captcha"]');
  if (enteredCaptcha === hiddenInput.value) {
    // 验证成功
  } else {
    // 验证失败
  }
});