如何为留言或评论表单添加验证码功能？

在网站运营过程中，留言和评论功能是增强用户互动、收集反馈的重要渠道。然而，随之而来的垃圾评论和恶意提交也常常困扰着网站管理员。为了有效防范这些不速之客，为留言或评论表单添加验证码功能显得尤为重要。安企CMS作为一个功能全面的内容管理系统，提供了便捷的方式来集成这一安全机制，帮助您维护一个清爽、高效的互动平台。

准备工作

在开始为您的留言或评论表单添加验证码之前，请确保您对安企CMS的后台操作有所了解，并且知道如何编辑网站的模板文件。通常，评论表单位于文档详情页面的模板中，而留言表单则可能位于独立的留言页面模板（如 guestbook/index.html 或扁平化模式下的 guestbook.html）中。

第一步：后台功能开启

首先，我们需要在安企CMS的后台启用验证码功能。登录您的安企CMS后台，导航到 全局设置 -> 内容设置。在这里，您会找到一个名为“留言评论验证码”的选项。请将其设置为开启状态，并保存您的更改。这一步是确保系统后端能够生成并验证验证码的基础。

第二步：修改模板文件

接下来，我们需要在前端模板文件中添加验证码的显示和输入区域。根据您的具体需求，这可能是在留言表单模板（如 guestbook/index.html 或 guestbook.html）中，或者是在文档详情页的评论表单中。找到您需要添加验证码的 <form> 标签内部，通常是在提交按钮之前，粘贴以下代码片段：

<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="form-control" style="flex: 1; height: 56px; border-right: none; border-radius: 4px 0 0 4px;">
  <img src="" id="get-captcha" alt="验证码" style="width: 150px; height: 56px; cursor: pointer; border: 1px solid #ced4da; border-left: none; border-radius: 0 4px 4px 0;" />
  <script>
    // 使用原生JavaScript获取验证码
    document.getElementById('get-captcha').addEventListener("click", function (e) {
      fetch('/api/captcha')
              .then(response => {
                if (!response.ok) {
                  throw new Error('网络请求失败');
                }
                return response.json();
              })
              .then(res => {
                if (res.code === 0 && res.data) {
                  document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id);
                  document.getElementById('get-captcha').setAttribute("src", res.data.captcha);
                } else {
                  console.error('获取验证码失败:', res.msg);
                  alert('获取验证码失败，请重试！');
                }
              }).catch(err => {
                console.error('请求验证码时发生错误:', err);
                alert('请求验证码时发生错误，请检查网络！');
              });
    });
    // 页面加载时自动获取并显示验证码
    document.getElementById('get-captcha').click();
  </script>
</div>

如果您的网站模板中已经引入了 jQuery 库，您可以选择使用 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="form-control" style="flex: 1; height: 56px; border-right: none; border-radius: 4px 0 0 4px;">
  <img src="" id="get-captcha" alt="验证码" style="width: 150px; height: 56px; cursor: pointer; border: 1px solid #ced4da; border-left: none; border-radius: 0 4px 4px 0;" />
  <script>
    // 使用jQuery获取验证码
    $('#get-captcha').on("click", function (e) {
      $.get('/api/captcha', function(res) {
        if (res.code === 0 && res.data) {
          $('#captcha_id').attr("value", res.data.captcha_id);
          $('#get-captcha').attr("src", res.data.captcha);
        } else {
          console.error('获取验证码失败:', res.msg);
          alert('获取验证码失败，请重试！');
        }
      }, 'json').fail(function(jqXHR, textStatus, errorThrown) {
          console.error('请求验证码时发生错误:', textStatus, errorThrown);
          alert('请求验证码时发生错误，请检查网络！');
      });
    });
    // 页面加载时自动获取并显示验证码
    $('#get-captcha').click();
  </script>
</div>

这段代码包含了一个隐藏的 captcha_id 字段（用于传递验证码的唯一标识符），一个