一个页面多个图形验证码冲突的解决方案

实际开发中，经常会遇到一个页面需要两个或多个验证码，使用同一个验证码调用两次会导致前一个失效。那么我们需要使用两个不同的验证码，具体示例请看下面。

问题描述

在一次项目中，找回密码和注册写在一起的，同时使用两个KgCaptcha的图形验证码，当时只有一个有用。

接下通过举例看我如何解决它；

代码实现 

引入多个KgCaptcha验证码时，定义 plural 参数，填写范围为数字1-20；通过该参数区分定义对象名，如plural=1，则对象名为kg1，以此类推。

// 同时引入多个js
<script src="https://cdn.kgcaptcha.com/captcha.js?appid=XXX&plural=1" id="KgCaptcha1"></script>
<script src="https://cdn.kgcaptcha.com/captcha.js?appid=XXX&plural=2" id="KgCaptcha2"></script>

<script type="text/javascript">
  
// 第一个验证码
kg1.captcha({
    // 绑定弹窗按钮
    button: "#captchaButton1",
    // 验证成功事务处理
    success: function (e) {
    // 验证成功，直接提交表单
    // form1.submit();
        console.log(e);
    },
    // 验证失败事务处理
    failure: function (e) {
        console.log(e);
    },
    // 点击刷新按钮时触发
    refresh: function (e) {
        console.log(e);
    }
});

// 第二个验证码
kg2.captcha({
    // 绑定弹窗按钮
    button: "#captchaButton2",
    // 验证成功事务处理
    success: function (e) {
    // 验证成功，直接提交表单
    // form2.submit();
        console.log(e);
    },
    // 验证失败事务处理
    failure: function (e) {
        console.log(e);
    },
    // 点击刷新按钮时触发
    refresh: function (e) {
        console.log(e);
    }
});

</script>

<a id="captchaButton1">点击弹出验证窗口</a>
<a id="captchaButton2">点击弹出验证窗口</a>

结果

同一页面上可以同时存在两个或多个验证码，相互不冲突。

相关链接

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

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

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