提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

验证码的花式玩法

2023-03-14 22:59:23 时间

01 前言

滑动验证码的常见样式有很多种，下面我就使用KgCaptcha来就给大家举例说说！

02 嵌入式

这种样式最常见，也是默认样式，直接在页面上展现。

// 引入js
<script src="https://cdn.kgcaptcha.com/captcha.js?appid=XXX"></script>

<script>
kg.captcha({
    // 绑定元素，验证框显示区域
    bind: "#captchaBox",

    // 验证成功事务处理
    success: function(e) {
        console.log(e); 
    },

    // 验证失败事务处理
    failure: function(e) {
        console.log(e); 
    },

    // 点击刷新按钮时触发
    refresh: function(e) {
        console.log(e);
    }
});
</script> 

<div id="captchaBox"></div>


4.PNG

03 触发式

这种样式占用面积较小，通过hover悬浮在指定元素上展现。

// 引入js
<script src="https://cdn.kgcaptcha.com/captcha.js?appid=XXX"></script>

<script>
kg.captcha({
    // 绑定显示区域
    bind: "#captchaBox",

    // 向上或向下浮出，top|down
    float: "top",

    // 验证成功事务处理
    success: function (e) {
        console.log(e);
    },

    // 验证失败事务处理
    failure: function (e) {
        console.log(e);
    },

    // 点击刷新按钮时触发
    refresh: function (e) {
        console.log(e);
    }
});
</script>

<div id="captchaBox"></div>

5.PNG

04 弹窗式

这种样式验证码默认不可见，通过点击或调用指定的方法后将以浮层的形式展现。

// 引入js
<script src="https://cdn.kgcaptcha.com/captcha.js?appid=XXX"></script>

<script>
kg.captcha({
    // 绑定弹窗按钮
    button: "#captchaButton",

    // 验证成功事务处理
    success: function (e) {
        // 验证成功，直接提交表单
        // form1.submit();
        console.log(e);
    },

    // 验证失败事务处理
    failure: function (e) {
        console.log(e);
    },

    // 点击刷新按钮时触发
    refresh: function (e) {
        console.log(e);
    }
});
</script>
<a id="captchaButton"></a>

6.PNG

05 相关链接

官方地址：凯格行为验证码（KgCaptcha）滑动拼图验证，无感验证码，文字点选验证码

在线体验：凯格行为验证码在线体验

开发文档：凯格行为验证码-开发文档

相关文章