yy日韩无码,富婆的诱惑,国产菊爆视频在线观看,国产精品无码AV高清波波AV,国产成人啪精品视频站午夜,已满十八岁免费观看电视剧十八岁,中文字幕av久久人妻蜜桃臀

極驗提供了一種行業(yè)驗證碼，用于留言，或者登陸的時候進行安全驗證。

下面來說一下如何使用。

網(wǎng)址： https://www.geetest.com/

在官網(wǎng)上注冊賬號并獲取一下ID。

HTML代碼例如：

 <form class="my-5"   id="form" >
                <div class="form-group  wow fadeIn">
                    <label for="contacts">姓名<span class="colorred">*</span></label>
                    <div>
                        <input type="text" name="contacts" required id="contacts" class="form-control" placeholder="如何稱呼您？" >
                    </div>
                </div>
                
                <div class="form-group  wow fadeIn">
                    <label for="mobile">電話<span class="colorred">*</span></label>
                    <div>
                        <input type="text" name="mobile" required id="mobile" class="form-control" placeholder="您的聯(lián)系電話" >
                    </div>
                </div>
                <div class="form-group  wow fadeIn">
                    <label for="content" >預(yù)約日期<span class="colorred">*</span></label>
                    <div> 
                      <input type="text" name="content" class="layui-input" id="content" placeholder="請選擇您方便的日期">                    
                     </div>
                </div>

                <div class="form-group  wow fadeIn">
                    <label for="content" >預(yù)約時間<span class="colorred">*</span></label>
                    <div>  
       
                <select name="yytime" id="yytime" class="form-control">
                            <option value="" disabled selected>請選擇你方便的時間點</option>                              
                              <option value="上午9點"  class="op">上午9點</option>
                              <option value="上午10點"  class="op">上午10點</option>
                              <option value="上午11點"  class="op">上午11點</option>
                              <option value="上午12點"  class="op">中午12點</option>
                              <option value="中午1點"  class="op">中午1點</option>
                              <option value="下午2點"  class="op">下午2點</option>
                              <option value="下午3點"  class="op">下午3點</option>
                              <option value="下午4點"  class="op">下午4點</option>
                              <option value="下午5點"  class="op">下午5點</option>
                              <option value="下午6點"  class="op">下午6點</option>
                            </select>

                      
                     </div>
                </div>                

                 <div class="form-group   wow fadeIn">
                    <label for="content" >驗證碼<span class="colorred">*</span></label>
                    <div>
                         <div id="captcha"> </div>
                    </div>
                </div>
               <div class="clear"></div>
               
                
                <div class="form-group mt-4 wow fadeIn">
                   <button type="submit" class="message-btn more-btn" id="btn">提交留言<i class="fas fa-chevron-circle-right"></i></button>
                </div>

            </form>

然后使用JS,官網(wǎng)提供了很多個DEMO，你可以選擇喜歡的模式。

JS代碼如下：

<script>
 document.addEventListener("DOMContentLoaded", function() {
    initGeetest4({
        captchaId: '7e111794121d87ca0959954f89580e1a',
        product: 'float'
    }, function(captcha) {
        captcha.appendTo("#captcha"); // 調(diào)用appendTo將驗證碼插入到頁面的某一個元素中

        // 監(jiān)聽表單的提交事件
        document.getElementById("form").addEventListener("submit", function(event) {
            event.preventDefault(); // 阻止默認的表單提交行為

            var result = captcha.getValidate();
            if (!result) {
                return alert('請完成驗證');
            }

            var data = {
                contacts: document.getElementById("contacts").value,
                mobile: document.getElementById("mobile").value,
                content: document.getElementById("content").value,
                yytime: document.getElementById("yytime").value,
                captcha_id: "7e111794121d87ca0959954f89580e1a",
                lot_number: result.lot_number,
                captcha_output: result.captcha_output,
                pass_token: result.pass_token
            };          

            $.ajax({
                type: 'POST', // 使用POST方法提交數(shù)據(jù)
                url: '{hmcms:msgaction}', // 替換為你的實際提交URL
                dataType: 'json',
                data: data,
                success: function(response) {
                    console.log("Response received:", response);
                    if (response.code) {
                        alert("謝謝您的反饋，我們會盡快聯(lián)系您！");
                        document.getElementById("form").reset(); // 重置表單
                    } else {
                        alert("留言錯誤");
                        captcha.reset(); // 重置驗證碼
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error occurred:", status, error);
                    alert('返回數(shù)據(jù)異常！');
                    captcha.reset(); // 重置驗證碼
                }
            });
        });
    });
});
    </script>

如此便可以了。