JS验证不重复验证码

关于 “JS验证不重复验证码”的完整攻略，我将按以下步骤讲解。

第一步：在前端生成并展示验证码

首先，在前端页面中，我们需要生成一个验证码，可以使用不同的方式，如下面的代码示例所示：

<div>
  <label for="captcha-input">验证码：</label>
  <input type="text" id="captcha-input" name="captcha" placeholder="请输入验证码" maxlength="4" required>
  <img src="" id="captcha-img" alt="验证码">
  <button type="button" onclick="refreshCaptcha()">刷新</button>
</div>

上述代码中，我们生成了一个文本输入框和一个图片元素，其中图片元素的 src 属性为空，需要通过 JavaScript 动态生成一张验证码图片，并设置到该图片元素中。同时，点击刷新按钮时，还需要重新生成并设置新的验证码图片。

生成验证码图片

现在，我们需要实现一个 JavaScript 函数 generateCaptcha() 来生成一张验证码图片。具体实现如下：

function generateCaptcha() {
  // 生成随机的四位验证码
  var captcha = Math.random().toString(36).substr(2, 4);
  // 将验证码存储到全局变量中，用于后面验证
  window._captcha = captcha;
  // 创建 canvas 元素
  var canvas = document.createElement("canvas");
  canvas.width = 100;
  canvas.height = 30;
  // 获取 canvas 上下文
  var ctx = canvas.getContext("2d");
  // 设置背景色为灰色
  ctx.fillStyle = "#ddd";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  // 设置字体样式和颜色
  ctx.font = "bold 20px Arial";
  ctx.fillStyle = "#333";
  // 将验证码绘制到 canvas 上
  for (var i = 0; i < captcha.length; i++) {
    ctx.fillText(captcha[i], 20*i+10, 20);
  }
  // 将 canvas 图片转换为 base64 编码，并设置到图片元素的 src 属性中
  var dataURL = canvas.toDataURL();
  document.getElementById("captcha-img").src = dataURL;
}

上述代码中，我们首先生成了一个长度为四的随机字符串作为验证码，并将其存储到全局变量 _captcha 中，用于后面验证。然后，我们创建了一个尺寸为 100x30 的 canvas 元素，并获取其上下文。接着，我们设置了 canvas 的背景色和字体样式，最后将验证码绘制到 canvas 上，并将其转换为 base64 编码的图片数据，设置到图片元素的 src 属性中。

刷新验证码图片

现在，我们需要实现一个 JavaScript 函数 refreshCaptcha() 来刷新验证码图片。具体实现如下：

function refreshCaptcha() {
  // 重新生成验证码图片
  generateCaptcha();
  // 清空验证码输入框的值
  document.getElementById("captcha-input").value = "";
  // 光标自动定位到验证码输入框中
  document.getElementById("captcha-input").focus();
}

上述代码中，我们首先调用前面实现的 generateCaptcha() 函数生成新的验证码图片，并将其设置到图片元素中。然后，我们清空验证码输入框的值，并将光标自动定位到该输入框中。

第二步：实现前端验证逻辑

现在，我们已经生成了验证码图片并展示在前端页面中，接下来需要实现前端验证逻辑来确保用户输入的验证码与刚刚生成的验证码相同。

接收用户输入的验证码

首先，我们需要在用户输入验证码并提交表单时，获取用户输入的验证码值，并与刚刚生成的验证码比对是否相同。具体实现如下：

document.getElementById("my-form").addEventListener("submit", function(event) {
  event.preventDefault();
  // 获取用户输入的验证码值
  var captchaInput = document.getElementById("captcha-input").value;
  // 获取全局变量中存储的验证码值
  var captchaCode = window._captcha;
  // 比对用户输入与刚生成的验证码是否相同
  if (captchaInput.toUpperCase() === captchaCode.toUpperCase()) {
    // 验证码输入正确，可以提交表单了
    document.getElementById("my-form").submit();
  } else {
    // 验证码输入错误，提示用户重新输入
    alert("验证码输入错误，请重新输入！");
    refreshCaptcha();
  }
});

上述代码中，我们首先获取用户输入的验证码值和刚刚生成的验证码值，然后使用 toUpperCase() 方法将它们转换为全部大写字母形式进行比对。如果二者相同，说明验证码输入正确，可以提交表单了。否则，我们需要提示用户重新输入，并刷新验证码图片。

第三步：后端验证逻辑

以上仅是前端验证逻辑，攻击者也可以通过一些方法绕过这个验证，因此我们还需要在后端进行验证，以确保安全性。

具体实现如下：

session_start();
$captcha_code = $_SESSION['captcha'];
if (strtoupper($_POST['captcha']) != strtoupper($captcha_code)) {
    // 验证码输入错误
    // 这里可以记录日志、封禁IP或者直接返回错误给前端，具体视业务而定
}

以上代码中，我们首先使用 session_start() 启动会话，然后从会话中获取刚刚生成的验证码值 $captcha_code。接着，我们比对用户提交的验证码值 $_POST['captcha'] 是否和 $captcha_code 相同。如果二者不同，说明验证码输入错误，可以记录日志、封禁IP或者直接返回错误信息给前端等。

示例说明

假设我们要在用户注册页面中添加验证码验证功能，具体流程如下：

示例一：使用字母数字混合验证码

首先，在用户注册页面中添加上述生成验证码图片的 HTML 代码，并实现对应的 JavaScript 函数，这里不再赘述。

然后，我们需要在用户注册时，验证用户输入的验证码值。

具体实现如下：

document.getElementById("register-form").addEventListener("submit", function(event) {
  event.preventDefault();

  // 获取用户输入的验证码值
  var captchaInput = document.getElementById("captcha-input").value;

  // 发送验证码值到服务器进行验证
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/verify_captcha.php", true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        // 验证码验证通过，可以提交表单了
        document.getElementById("register-form").submit();
      } else {
        // 验证码验证失败，提示用户重新输入
        alert("验证码输入错误，请重新输入！");
        refreshCaptcha();
      }
    }
  };
  xhr.send("captcha=" + encodeURIComponent(captchaInput));
});

以上代码中，我们在用户提交表单时，将用户输入的验证码值 captchaInput 发送到服务器端的 /verify_captcha.php 接口进行验证。如果验证码验证通过，就可以像往常一样提交表单了。否则，我们需要提示用户重新输入验证码，并刷新验证码图片。

在服务器端，我们需要编写 verify_captcha.php 接口，实现验证码验证逻辑，如下所示：

session_start();
$captcha_code = $_SESSION['captcha'];
if (strtoupper($_POST['captcha']) != strtoupper($captcha_code)) {
    http_response_code(400);
    echo "验证码输入错误";
    return;
}
// 验证通过
echo "OK";

以上代码中，我们首先从会话中获取刚刚生成的验证码值 $captcha_code，然后比对用户提交的验证码值 $_POST['captcha'] 是否和 $captcha_code 相同。如果二者不同，说明验证码输入错误，我们可以返回一个 HTTP 400 错误码和错误消息给前端，告诉它验证码验证失败。否则，我们返回一个消息 "OK"，表示验证码验证通过。

示例二：使用算术验证码

另外一种常用的验证码是算术验证码，它的实现跟字母数字混合验证码类似，只不过需要在 JavaScript 中实现一些简单的算术运算逻辑。

具体实现如下：

<div>
  <label for="captcha-input">验证码：</label>
  <input type="text" id="captcha-input" name="captcha" placeholder="请输入验证码" maxlength="2" required>
  <span id="captcha-equation"></span>
  <button type="button" onclick="refreshCaptcha()">刷新</button>
</div>

首先，我们需要在 HTML 中添加一个用于展示算术式的元素，并修改对应的 JavaScript 代码实现算术式的生成和验证，具体代码如下：

function generateCaptcha() {
  var ops = ["+", "-", "x"]; // 算术操作符
  var op = ops[Math.floor(Math.random() * 3)]; // 随机选择一个操作符
  var a = Math.floor(Math.random() * 10) + 1; // 随机生成一个 1-10 之间的整数
  var b = Math.floor(Math.random() * 10) + 1; // 随机生成一个 1-10 之间的整数
  var result;
  switch (op) {
    case "+":
      result = a + b;
      break;
    case "-":
      result = a - b;
      break;
    case "x":
      result = a * b;
      break;
  }
  window._captcha = result;
  document.getElementById("captcha-equation").textContent = a + " " + op + " " + b + " = ";
}

document.getElementById("register-form").addEventListener("submit", function(event) {
  event.preventDefault();

  var captchaInput = document.getElementById("captcha-input").value;
  var captchaCode = window._captcha;

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/verify_captcha.php", true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        document.getElementById("register-form").submit();
      } else {
        alert("验证码输入错误，请重新输入！");
        refreshCaptcha();
      }
    }
  };
  xhr.send("captcha=" + encodeURIComponent(captchaInput));
});

function refreshCaptcha() {
  generateCaptcha();
  document.getElementById("captcha-input").value = "";
  document.getElementById("captcha-input").focus();
}

上述代码中，我们首先实现了一个 generateCaptcha() 函数，随机生成一个算术式，并将其运算结果存储到全局变量 _captcha 中，用于后面验证。然后，在用户提交表单时，我们首先获取用户输入的验证码值 captchaInput 和刚刚生成的验证码值 captchaCode，然后使用 toUpperCase() 方法将它们转换为全部大写字母形式进行比对。如果二者相同，说明验证码输入正确，可以提交表单了。否则，我们需要提示用户重新输入，并刷新验证码图片。

在服务器端，我们同样需要编写 verify_captcha.php 接口，实现验证码验证逻辑，并通过 eval() 函数来计算算术式的结果，如下所示：

session_start();
$captcha_code = $_SESSION['captcha'];
eval('$result = ' . $_POST['captcha'] . ';'); // 将用户输入的算术式转换为 PHP 代码并计算结果
if ($_POST['captcha'] != $captcha_code || $_POST['captcha'] != $result) {
    http_response_code(400);
    echo "验证码输入错误";
    return;
}
// 验证通过
echo "OK";

以上代码中，我们首先从会话中获取刚刚生成的验证码值 $captcha_code，然后使用 eval() 函数将用户输入的算术式转换为 PHP 代码并计算结果。如果用户输入的算术式结果和 $captcha_code 不同，则说明验证码输入错误，我们可以返回一个 HTTP 400 错误码和错误消息给前端，告诉它验证码验证失败。否则，我们返回一个消息 "OK"，表示验证码验证通过。