作为一位资深的网站运营专家，我很乐意为您详细阐述如何在AnQiCMS留言表单中正确添加验证码功能。这项功能对于维护网站的健康生态、抵御垃圾信息入侵至关重要，它能有效提升用户体验，并确保您接收到的留言都是真实有效的。AnQiCMS作为一个高效、灵活的内容管理系统，在验证码功能的集成上提供了简洁明了的路径。

为您的AnQiCMS留言表单添加验证码：告别垃圾信息，提升用户体验

在当今网络环境中，网站留言板、联系表单等互动区域往往成为垃圾信息制造者的目标。这些自动化程序（或称之为“机器人”）会批量提交无意义甚至有害的内容，不仅影响网站的正常运营和数据清洁，更会降低真实用户的使用体验。幸运的是，安企CMS（AnQiCMS）深知这一痛点，为网站管理员提供了内置的验证码功能，帮助您轻松为留言表单构建一道坚实的防线。

要正确在AnQiCMS的留言表单中添加验证码，我们主要分为两个核心步骤：首先是在后台开启验证码功能，其次是在前端模板文件中集成验证码元素。

第一步：在AnQiCMS后台开启验证码功能

这是启用验证码功能的基础，如果此开关未开启，即便您在前端模板中添加了代码，验证码也无法正常工作。

  1. 进入AnQiCMS的管理后台：使用您的管理员账号登录。
  2. 导航至功能管理：在左侧菜单中，找到并点击“功能管理”。
  3. 定位网站留言管理：在“功能管理”的子菜单中，您会看到“网站留言管理”选项，点击进入。
  4. 开启留言评论验证码：在“网站留言管理”的设置页面，您会发现一个名为“留言评论验证码”的设置项。这里有一个重要的开关，请确保将其设置为开启状态。开启后，系统便会在服务器端准备好验证码的生成和校验逻辑。

完成这一步后，AnQiCMS的后端已经准备好处理验证码请求了。接下来，我们需要在网站的前端模板中，将验证码的视觉元素和交互逻辑呈现给用户。

第二步：在前端模板文件中集成验证码元素

验证码在后台开启后，需要在承载留言表单的模板文件（通常是 guestbook/index.html 或您自定义的留言表单模板）中加入特定的HTML结构和JavaScript代码。这些代码将负责向服务器请求验证码图片，并在用户提交时传递验证码ID和用户输入的值。

以下是您需要添加到留言表单 <form> 标签内部的代码段。请根据您的项目是否使用jQuery来选择相应的JavaScript实现方式：

<div style="display: flex; clear: both; margin-bottom: 15px;">
  <input type="hidden" name="captcha_id" id="captcha_id">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="layui-input" style="flex: 1; height: 56px; border-right: none;">
  <img src="" id="get-captcha" alt="验证码" style="width: 150px; height: 56px; cursor: pointer; border: 1px solid #e6e6e6; border-left: none;" />
  
  <script>
    // 原生JavaScript方式
    document.getElementById('get-captcha').addEventListener("click", function (e) {
      fetch('/api/captcha') // 向后端API请求验证码数据
              .then(response => {
                return response.json() // 解析JSON响应
              })
              .then(res => {
                // 将获取到的验证码ID设置到隐藏字段中
                document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id);
                // 将验证码图片URL设置到图片元素的src属性中
                document.getElementById('get-captcha').setAttribute("src", res.data.captcha);
              }).catch(err => {
                console.error("获取验证码失败:", err); // 错误处理
              });
    });
    // 页面加载时自动触发一次点击，以显示初始验证码
    document.getElementById('get-captcha').click();
  </script>

  <!-- 如果您的网站使用了jQuery，可以使用以下jQuery方式，替换上面的原生JavaScript代码 -->
  <!--
  <script>
    // jQuery方式
    $('#get-captcha').on("click", function (e) {
      $.get('/api/captcha', function(res) {
        // 将获取到的验证码ID设置到隐藏字段中
        $('#captcha_id').attr("value", res.data.captcha_id);
        // 将验证码图片URL设置到图片元素的src属性中
        $('#get-captcha').attr("src", res.data.captcha);
      }, 'json').fail(function(jqXHR, textStatus, errorThrown) {
        console.error("获取验证码失败:", textStatus, errorThrown);
      });
    });
    // 页面加载时自动触发一次点击，以显示初始验证码
    $('#get-captcha').click();
  </script>
  -->
</div>

代码解析：

  • <input type="hidden" name="captcha_id" id="captcha_id">：这是一个隐藏字段，用于存储由服务器生成的当前验证码的唯一标识符。每次验证码图片刷新，这个ID也会随之更新。用户提交表单时，这个 captcha_id 会一同发送到服务器，以便服务器知道要验证的是哪一张验证码。
  • <input type="text" name="captcha" required placeholder="请填写验证码" ...>：这是用户输入验证码的地方。name="captcha" 是服务器接收用户输入的验证码值的字段名，required 属性确保用户必须填写。
  • <img src="" id="get-captcha" alt="验证码" ...>：这是用于显示验证码图片的元素。id="get-captcha" 用于JavaScript代码选择该元素，cursor: pointer; 样式提示用户可以点击刷新。
  • JavaScript 代码块：
    • 无论是原生JS还是jQuery版本，其核心逻辑都是监听验证码图片的点击事件。
    • 当图片被点击时，它会向 /api/captcha 这个接口发起请求。
    • 服务器会返回一个包含 captcha_id（新的验证码唯一标识）和 captcha（新的验证码图片URL）的JSON数据。
    • JavaScript代码会更新隐藏字段 captcha_id 的值，并将 <img> 标签的 src 属性更新为新的验证码图片URL，从而实现验证码的刷新。
    • document.getElementById('get-captcha').click(); (或 $('#get-captcha').click();) 这一行非常重要，它确保在页面加载完成后，立即请求并显示第一张验证码图片，而不是等待用户点击。

将这段代码插入到您留言表单中希望显示验证码的位置，并确保它在 <form> 标签内部即可。

工作原理简述

当您完成以上两步后，验证码功能便已无缝集成。其背后的简要工作流程是：

  1. 用户访问留言表单页面，前端脚本通过 /api/captcha 请求一张验证码图片和其对应的唯一ID。
  2. 图片显示在页面上，ID则存储在隐藏字段中。
  3. 用户填写留言内容和看到的验证码，点击提交。
  4. 表单数据（包括留言内容、用户输入的验证码值和隐藏的 captcha_id）被发送到AnQiCMS的后端。
  5. 后端根据 captcha_id 找到对应的正确验证码，与用户提交的值进行比对。
  6. 如果匹配成功，留言会被正常处理；如果失败，则会提示验证码错误。

通过这种方式，AnQiCMS为您的网站留言表单提供了有效的安全防护，大大减少了垃圾信息的困扰，让您的网站互动区域更加纯净和高效。

常见问题 (FAQ)

1. 为什么我按照步骤添加了代码，但验证码图片不显示或无法刷新？

这通常是因为您忘记在AnQiCMS后台开启“留言评论验证码”功能。请回到第一步，检查“功能管理” -> “网站留言管理”中，确保该功能已设置为开启状态。后台未启用，前端即使有代码也无法从后端获取验证码数据。

2. 验证码图片的样式看起来不太协调，我能自定义它的外观吗？

当然可以。验证码图片本身是由