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 自帶驗證碼	配置簡單、穩定、無需付費，與系統無縫集成。	是傳統圖片驗證碼，可能被高級機器識別。	絕大多數場景的首選，有效防御普通垃圾提交。
第三方驗證碼服務	安全性極高，用戶體驗好（如滑動驗證），能有效防御機器批量操作。	配置復雜，需要二次開發，免費版有調用次數限制。	對安全性要求極高的場景，如注冊、支付等。