eyoucms表单提交前怎么加验证码?

在 EyouCMS 的表单提交前添加验证码是一个非常有效的防垃圾留言和恶意提交的安全措施。操作主要分为两大步：1. 后台开启并配置验证码功能；2. 在前端表单中插入验证码显示和验证代码。

以下是详细的步骤。

方法一：使用 EyouCMS 自带验证码功能（推荐，最简单）

这是最标准、最兼容的方法，EyouCMS 已内置了强大的验证码功能。

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

登录 EyouCMS 后台。

根据你的表单类型，找到对应设置位置：

如果是留言板表单：

进入 系统 -> 系统设置 -> 安全与效率。

找到 验证码设置 区域。

在 留言板验证码 选项中，选择 开启。

重要： 你还可以开启 验证码重叠度 和 验证码加密串 来增强安全性。

如果是自由表单：

进入 系统 -> 自由表单 -> 管理表单。

点击你想要编辑的表单的 设置 按钮。

在表单配置中，寻找 是否开启验证码 的选项，将其开启并保存。

第二步：修改前端模板，添加验证码字段

你需要编辑显示表单的模板文件（如 message.Html或你的自由表单模板）。

在 <form>表单内部，提交按钮之前， 添加以下代码：

代码解释：

<input name="verify">：这个输入框的名称必须是 verify，因为系统会验证这个字段。

<img src="{:url('/api/ajax/verify')}">：这是调用 EyouCMS 生成验证码图片的接口。

onclick="this.src='...'：这是一小段 Javascript 代码，实现点击验证码图片即可刷新的功能，非常用户友好。

完整表单示例

<form action="{:url('/api/index/message')}" method="post">
    <input type="text" name="username" placeholder="您的姓名" required>
    <input type="tel" name="phone" placeholder="联系电话" required>
    
    <!-- 添加验证码区域 -->
    <div class="form-group">
        <label>验证码</label>
        <input type="text" name="verify" placeholder="输入验证码" required>
        <img src="{:url('/api/ajax/verify')}" onclick="this.src='{:url('/api/ajax/verify')}?tm='+Math.random();" alt="验证码" style="cursor: pointer;">
    </div>

    <button type="submit">提交留言</button>
</form>

至此，EyouCMS 自带验证码功能已添加完毕。 系统会自动在后台验证用户输入的验证码是否正确，无需你编写额外的验证逻辑。

方法二：使用第三方验证码服务（如极验、腾讯验证码）

如果需要更强的安全性（如滑动拼图、点选文字等交互式验证），可以使用第三方服务。这里以免费易用的 Vaptcha 或极验为例，简述流程。

操作步骤：

注册并获取ID：前往 Vaptcha 或极验官网注册账号，创建验证单元，获取 VID和 Key。

引入JS库：在你的表单模板页面头部引入第三方验证码的 JavaScript 库。

放置容器：在表单中放置一个用于显示验证码的容器 <div>。

前端验证：配置验证码，并在验证通过后，将得到的 token填入一个隐藏域。

后端验证：修改 EyouCMS 的表单处理逻辑（通常需要二次开发），在提交时向第三方服务器验证 token的有效性。

前端模板示例代码（Vaptcha）：

<!-- 1. 引入Vaptcha的JS SDK -->
<script src="https://cdn.vaptcha.com/v3.js"></script>

<form action="{:url('/api/index/message')}" method="post" id="myForm">
    <input type="text" name="username" placeholder="姓名" required>
    
    <!-- 2. 验证码容器 -->
    <div id="vaptchaContainer" style="width: 300px;height: 36px;">
        <div class="vaptcha-init-main">
            <div class="vaptcha-init-loading"></div>
        </div>
    </div>
    <!-- 3. 用于存放验证成功后token的隐藏域 -->
    <input type="hidden" name="vaptcha_token" id="vaptchaToken" value="">

    <button type="submit">提交</button>
</form>

<script>
// 4. 初始化Vaptcha
vaptcha({
    vid: '你的VID', // 替换成你的VID
    container: '#vaptchaContainer',
    area: 'auto'
}).then(function (vaptchaObj) {
    vaptchaObj.render(); // 渲染验证码
    // 监听验证成功事件
    vaptchaObj.listen('pass', function() {
        // 验证通过后，将token设置到隐藏域
        document.getElementById('vaptchaToken').value = vaptchaObj.getToken();
    });
    // 监听表单提交，可在此进行额外验证
    document.getElementById('myForm').addEventListener('submit', function(e) {
        if (!vaptchaObj.getToken()) {
            alert('请完成验证码验证！');
            e.preventDefault(); // 阻止表单提交
        }
    });
});
</script>

注意： 方法二需要你具备一定的二次开发能力，以修改 EyouCMS 的提交接口，使其能处理第三方验证码的验证请求。对于大多数用户，方法一（使用系统自带验证码） 已经完全足够。

总结

方法	优点	缺点	适用场景
EyouCMS 自带验证码	配置简单、稳定、无需付费，与系统无缝集成。	是传统图片验证码，可能被高级机器识别。	绝大多数场景的首选，有效防御普通垃圾提交。
第三方验证码服务	安全性极高，用户体验好（如滑动验证），能有效防御机器批量操作。	配置复杂，需要二次开发，免费版有调用次数限制。	对安全性要求极高的场景，如注册、支付等。