eyoucms表單提交前怎么加驗(yàn)證碼?

在 EyouCMS 的表單提交前添加驗(yàn)證碼是一個(gè)非常有效的防垃圾留言和惡意提交的安全措施。操作主要分為兩大步：1. 后臺(tái)開啟并配置驗(yàn)證碼功能；2. 在前端表單中插入驗(yàn)證碼顯示和驗(yàn)證代碼。

以下是詳細(xì)的步驟。

方法一：使用 EyouCMS 自帶驗(yàn)證碼功能（推薦，最簡(jiǎn)單）

這是最標(biāo)準(zhǔn)、最兼容的方法，EyouCMS 已內(nèi)置了強(qiáng)大的驗(yàn)證碼功能。

第一步：后臺(tái)開啟驗(yàn)證碼功能

登錄 EyouCMS 后臺(tái)。

根據(jù)你的表單類型，找到對(duì)應(yīng)設(shè)置位置：

如果是留言板表單：

進(jìn)入 系統(tǒng) -> 系統(tǒng)設(shè)置 -> 安全與效率。

找到 驗(yàn)證碼設(shè)置 區(qū)域。

在 留言板驗(yàn)證碼 選項(xiàng)中，選擇 開啟。

重要： 你還可以開啟 驗(yàn)證碼重疊度 和 驗(yàn)證碼加密串 來(lái)增強(qiáng)安全性。

如果是自由表單：

進(jìn)入 系統(tǒng) -> 自由表單 -> 管理表單。

點(diǎn)擊你想要編輯的表單的 設(shè)置 按鈕。

在表單配置中，尋找 是否開啟驗(yàn)證碼 的選項(xiàng)，將其開啟并保存。

第二步：修改前端模板，添加驗(yàn)證碼字段

你需要編輯顯示表單的模板文件（如 message.Html或你的自由表單模板）。

在 <form>表單內(nèi)部，提交按鈕之前， 添加以下代碼：

代碼解釋：

<input name="verify">：這個(gè)輸入框的名稱必須是 verify，因?yàn)橄到y(tǒng)會(huì)驗(yàn)證這個(gè)字段。

<img src="{:url('/api/ajax/verify')}">：這是調(diào)用 EyouCMS 生成驗(yàn)證碼圖片的接口。

onclick="this.src='...'：這是一小段 Javascript 代碼，實(shí)現(xiàn)點(diǎn)擊驗(yàn)證碼圖片即可刷新的功能，非常用戶友好。

完整表單示例

<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ú)需你編寫額外的驗(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)述流程。

操作步驟：

注冊(cè)并獲取ID：前往 Vaptcha 或極驗(yàn)官網(wǎng)注冊(cè)賬號(hào)，創(chuàng)建驗(yàn)證單元，獲取 VID和 Key。

引入JS庫(kù)：在你的表單模板頁(yè)面頭部引入第三方驗(yàn)證碼的 JavaScript 庫(kù)。

放置容器：在表單中放置一個(gè)用于顯示驗(yàn)證碼的容器 <div>。

前端驗(yàn)證：配置驗(yàn)證碼，并在驗(yàn)證通過(guò)后，將得到的 token填入一個(gè)隱藏域。

后端驗(yàn)證：修改 EyouCMS 的表單處理邏輯（通常需要二次開發(fā)），在提交時(shí)向第三方服務(wù)器驗(yàn)證 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. 驗(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)聽驗(yàn)證成功事件
    vaptchaObj.listen('pass', function() {
        // 驗(yàn)證通過(guò)后，將token設(shè)置到隱藏域
        document.getElementById('vaptchaToken').value = vaptchaObj.getToken();
    });
    // 監(jiān)聽表單提交，可在此進(jìn)行額外驗(yàn)證
    document.getElementById('myForm').addEventListener('submit', function(e) {
        if (!vaptchaObj.getToken()) {
            alert('請(qǐng)完成驗(yàn)證碼驗(yàn)證！');
            e.preventDefault(); // 阻止表單提交
        }
    });
});
</script>

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

總結(jié)

方法	優(yōu)點(diǎn)	缺點(diǎn)	適用場(chǎng)景
EyouCMS 自帶驗(yàn)證碼	配置簡(jiǎn)單、穩(wěn)定、無(wú)需付費(fèi)，與系統(tǒng)無(wú)縫集成。	是傳統(tǒng)圖片驗(yàn)證碼，可能被高級(jí)機(jī)器識(shí)別。	絕大多數(shù)場(chǎng)景的首選，有效防御普通垃圾提交。
第三方驗(yàn)證碼服務(wù)	安全性極高，用戶體驗(yàn)好（如滑動(dòng)驗(yàn)證），能有效防御機(jī)器批量操作。	配置復(fù)雜，需要二次開發(fā)，免費(fèi)版有調(diào)用次數(shù)限制。	對(duì)安全性要求極高的場(chǎng)景，如注冊(cè)、支付等。