在网站运营中，留言板和评论区往往是与用户互动的重要渠道。然而，随之而来的垃圾信息和恶意提交也是一个令人头疼的问题。为了有效过滤这些噪音，集成验证码功能是行之有效的方法。今天，我们就来聊聊如何在安企CMS（AnQiCMS）的前端表单中，轻松地嵌入并显示留言验证码，为你的网站筑起一道防线。

整个过程可以分为三个主要步骤：首先是后台设置，然后是前端模板的 HTML 结构，最后是 JavaScript 动态加载逻辑。

第一步：在安企CMS后台开启验证码功能

在着手修改前端模板之前，我们需要确保验证码功能已经在安企CMS的后台管理系统中启用。

  1. 登录你的安企CMS后台管理界面。
  2. 导航到“功能管理”菜单，你通常可以在这里找到“网站留言”或“内容评论”相关的设置项。
  3. 找到并启用“留言评论验证码功能”。这一步非常关键，只有后台功能开启了，前端才能正常调用验证码服务。

完成这一步后，你的网站就准备好在前端显示验证码了。

第二步：修改前端模板，嵌入验证码元素

接下来，我们需要编辑网站的前端模板文件，将验证码的显示区域和相关逻辑代码添加进去。这通常会是在你的留言表单（例如 guestbook/index.html 模板）或评论表单（例如文档详情页中包含评论表单的模板）中。

在你希望显示验证码的位置，比如“留言内容”输入框下方或“提交”按钮上方，插入以下 HTML 结构：

<div style="display: flex; clear: both; align-items: center; margin-top: 15px;">
  <input type="hidden" name="captcha_id" id="captcha_id">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="form-control" style="flex: 1; margin-right: 10px; height: 56px;">
  <img src="" id="get-captcha" style="width: 150px; height: 56px; cursor: pointer; border: 1px solid #ccc; background-color: #f5f5f5;" alt="验证码" title="点击刷新验证码" />
</div>

这段代码包含了三个核心部分：

  • 一个隐藏的输入框 (captcha_id)：它用来存储验证码的唯一标识符。当你向后端提交表单时，这个 ID 会随之发送，后端会根据这个 ID 来验证用户输入的验证码是否正确。
  • 一个文本输入框 (captcha)：用户在这里输入他们看到的验证码字符。建议加上 required 属性，以确保用户不会漏填。
  • 一个图片标签 (img)：验证码图片将在这里显示。我们给它一个 id="get-captcha"，方便通过 JavaScript 来控制图片的加载和刷新。同时，为了提高用户体验，我们添加了 alt 和 title 属性，让用户知道这是一张验证码图片，并且可以点击刷新。

为了让表单布局更美观，你可以根据自己的 CSS 框架（比如 Bootstrap 或其他）调整 class 和 style 属性。这里给了一个简单的 Flex 布局示例，你可以根据实际情况进行修改。

第三步：添加 JavaScript 逻辑，动态加载和刷新验证码

光有 HTML 结构还不够，我们还需要一些 JavaScript 代码来与安企CMS的后端验证码服务进行交互，从而加载并刷新验证码图片。

将以下 JavaScript 代码片段放在你模板文件的 <script> 标签内，或者在一个外部 JS 文件中被引入的地方。为了确保代码在页面 DOM 加载完成后执行，我们将其放在了 DOMContentLoaded 事件监听器中。

”`javascript