完整表單示例

<form action="{:url('/api/index/message')}" method="post">
    <input type="text" name="username" placeholder="您的姓名" required>
    <input type="tel" name="phone" placeholder="聯(lián)系電話" required>
    
    <!-- 添加驗(yàn)證碼區(qū)域 -->
    <div class="form-group">
        <label>驗(yàn)證碼</label>
        <input type="text" name="verify" placeholder="輸入驗(yàn)證碼" required>
        <img src="{:url('/api/ajax/verify')}" onclick="this.src='{:url('/api/ajax/verify')}?tm='+Math.random();" alt="驗(yàn)證碼" style="cursor: pointer;">
    </div>

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

至此，EyouCMS 自帶驗(yàn)證碼功能已添加完畢。 系統(tǒng)會(huì)自動(dòng)在后臺(tái)驗(yàn)證用戶輸入的驗(yàn)證碼是否正確，無(wú)需你編寫(xiě)額外的驗(yàn)證邏輯。

方法二：使用第三方驗(yàn)證碼服務(wù)（如極驗(yàn)、騰訊驗(yàn)證碼）

如果需要更強(qiáng)的安全性（如滑動(dòng)拼圖、點(diǎn)選文字等交互式驗(yàn)證），可以使用第三方服務(wù)。這里以免費(fèi)易用的 Vaptcha 或 極驗(yàn) 為例，簡(jiǎn)述流程。

操作步驟：

前端模板示例代碼（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. 驗(yàn)證碼容器 -->
    <div id="vaptchaContainer" style="width: 300px;height: 36px;">
        <div class="vaptcha-init-main">
            <div class="vaptcha-init-loading"></div>
        </div>
    </div>
    <!-- 3. 用于存放驗(yàn)證成功后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(); // 渲染驗(yàn)證碼
    // 監(jiān)聽(tīng)驗(yàn)證成功事件
    vaptchaObj.listen('pass', function() {
        // 驗(yàn)證通過(guò)后，將token設(shè)置到隱藏域
        document.getElementById('vaptchaToken').value = vaptchaObj.getToken();
    });
    // 監(jiān)聽(tīng)表單提交，可在此進(jìn)行額外驗(yàn)證
    document.getElementById('myForm').addEventListener('submit', function(e) {
        if (!vaptchaObj.getToken()) {
            alert('請(qǐng)完成驗(yàn)證碼驗(yàn)證！');
            e.preventDefault(); // 阻止表單提交
        }
    });
});
</script>

注意： 方法二需要你具備一定的二次開(kāi)發(fā)能力，以修改 EyouCMS 的提交接口，使其能處理第三方驗(yàn)證碼的驗(yàn)證請(qǐng)求。對(duì)于大多數(shù)用戶，方法一（使用系統(tǒng)自帶驗(yàn)證碼） 已經(jīng)完全足夠。

總結(jié)

給你的建議：

直接使用 方法一，即開(kāi)啟 EyouCMS 自帶的驗(yàn)證碼功能。它已經(jīng)能攔截 99% 的垃圾信息，且配置非常簡(jiǎn)單，是性價(jià)比最高的選擇。