KgCaptcha基于Vue.js实现滑动拼图验证码
背景
关于验证码的使用场景还是非常多的，很多网站上的验证码可谓是五花八门，下面是我使用Vue.js实现KgCaptcha滑动拼图验证码做的一个笔记。
效果展示
准备工作
∙访问Vue.js中文，复制Vue.js插件链接。
∙注意：先HTML头部初始化行为验证码，然后HTML底部初始化Vue.js，否则KgCaptcha的js部分函数与被Vue.js发生冲突，导致失效。
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="vue.js"></script>
<script id="KgCaptcha" src="captcha.js?appid=XXX"></script>
<script>
    kg.captcha({
        // 绑定元素，验证框显示区域
        bind: "#captchaBox",
        // 验证成功事务处理
        success: function(e) {
            console.log(e);
            kg.$('#token').value = e['token'];
        },
        // 验证失败事务处理
        failure: function(e) {
            console.log(e);
        },
        // 点击刷新按钮时触发
        refresh: function(e) 网站底部代码js特效{
            console.log(e);
        }
    });
</script>
</head>
<body>
    <div id="app">
       
        token: <input name="token" id="token" />
       
        <div id="captchaBox"></div>
       
        <button  type="button">提交</button>
       
    </div>
</body>
<script>
    var app = new Vue({
    el: '#app',
})
</script>
</html>
实现代码
以上就是我基于Vue.js使用KgCaptcha开发滑动拼图验证码的记录。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。