验证码的花式玩法_验证码弹窗样式-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40794177/article/details/129199226

本文介绍了KgCaptcha滑动验证码的三种样式：嵌入式、触发式和弹窗式，并提供了相应的JavaScript代码示例，包括验证成功和失败的处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

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>

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>