原因

一个页面须要两个验证码，应用同一个验证码调用两次会导致有前一个生效。那么咱们须要创立不同的两个验证码，别离做验证。

截图展现

具体实现

  • 同时引入多个KgCaptcha的js。
  • 引入多个JS时，请定义 plural 参数；通过该参数辨别定义对象名，如plural=1，则对象名为kg1，以此类推。
<script src="captcha.js?appid=XXX&plural=1" id="KgCaptcha1"></script><script src="captcha.js?appid=XXX&plural=2" id="KgCaptcha2"></script>
  • 初始化验证码
<script type="text/javascript">// 第一个验证码kg1.captcha({    // 绑定元素，验证框显示区域    bind: "#captchaBox1",    // 验证胜利事务处理    success: function(e) {        console.log(e);    },    // 验证失败事务处理    failure: function(e) {        console.log(e);    },    // 点击刷新按钮时触发    refresh: function(e) {        console.log(e);    }}); // 第二个验证码kg2.captcha({    // 绑定元素，验证框显示区域    bind: "#captchaBox2",    // 验证胜利事务处理    success: function(e) {        console.log(e);    },    // 验证失败事务处理    failure: function(e) {        console.log(e);    },    // 点击刷新按钮时触发    refresh: function(e) {        console.log(e);    }}); </script>
  • 创立验证框显示区域
<!-- 第一个验证码 --><div id="captchaBox1"></div><!-- 第二个验证码 --><div id="captchaBox2"></div>

总结

SDK开源地址：https://github.com/KgCaptcha，顺便做了一个演示：https://www.kgcaptcha.com/demo/