欢迎光临黑马视觉品牌官网,开启你的互联网营销之旅!
新闻中心 网络推广 网站建设 优化推广

如何使用极验行业验证码

时间:2024-07-27   来源:网站建设

image.png


极验提供了一种行业验证码,用于留言,或者登陆的时候进行安全验证。

下面来说一下如何使用。

网址: https://www.geetest.com/

在官网上注册账号并获取一下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="您的联系电话" >
                    </div>
                </div>
                <div class="form-group  wow fadeIn">
                    <label for="content" >预约日期<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" >预约时间<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,官网提供了很多个DEMO,你可以选择喜欢的模式。image.png


JS代码如下:

<script>
 document.addEventListener("DOMContentLoaded", function() {
    initGeetest4({
        captchaId: '7e111794121d87ca0959954f89580e1a',
        product: 'float'
    }, function(captcha) {
        captcha.appendTo("#captcha"); // 调用appendTo将验证码插入到页面的某一个元素中

        // 监听表单的提交事件
        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方法提交数据
                url: '{hmcms:msgaction}', // 替换为你的实际提交URL
                dataType: 'json',
                data: data,
                success: function(response) {
                    console.log("Response received:", response);
                    if (response.code) {
                        alert("谢谢您的反馈,我们会尽快联系您!");
                        document.getElementById("form").reset(); // 重置表单
                    } else {
                        alert("留言错误");
                        captcha.reset(); // 重置验证码
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error occurred:", status, error);
                    alert('返回数据异常!');
                    captcha.reset(); // 重置验证码
                }
            });
        });
    });
});
    </script>


如此便可以了。



本文标签:
新闻推荐
龙华网站建设多少钱?
龙华网站建设多少钱?

大家好,这里是黑马视觉,今天我们来聊聊在深圳建一个网站需要多少钱?龙华网站建设需要多少钱?从所周知,...

龙华外贸网站建设必需知道的四大注意事项
龙华外贸网站建设必需知道的四大注意事项

在深圳有很多外贸公司,他们已经不满足于通过其他平台来引流,于是他们都需要建设一个自己自己的外贸网站,...

iOS开发 各iPhone手机屏幕尺寸分辨率
iOS开发 各iPhone手机屏幕尺寸分辨率

机型物理像素逻辑像素规格对角线iPhone 14 Pro Max1290*2796px430*932pt@3x6.7英寸iPhone 14 Pro1179*2556p...

前端#定位HTML小知识
前端#定位HTML小知识

我们在网站开发的过程中,经常会遇到这样的设计要求。比如说:在大分类:关于我们栏目下面有好几个子栏目,...

在线沟通
点我即可
对话
15899750475
手机
微信扫一扫

编辑 装修 价格 托管 实力 流量 搜索引擎 服务器 标准 上线 业务

微信
Top