前言
实际开发中，经常会遇到一个页面需要两个或多个验证码，使用同一个验证码调用两次会导致前一个失效。那么我们需要使用两个不同的验证码，具体示例请看下面。
问题描述
在一次项目中，找回密码和注册写在一起的，同时使用两个KgCaptcha的图形验证码，当时只有一个有用。
接下通过举例看我如何解决它；
代码实现
引入多个KgCaptcha验证码时，定义 plural 参数，填写范围为数字1-20；通过该参数区分定义对象名，如plural=1，则对象名为kg1，以此类推。
// 同时引入多个js <scriptsrc="https://cdn.kgcaptcha.com/captcha.js?appid=XXX&plural=1"id="KgCaptcha1"></script><scriptsrc="https://cdn.kgcaptcha.com/captcha.js?appid=XXX&plural=2"id="KgCaptcha2"></script><scripttype="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><aid="captchaButton1">点击弹出验证窗口</a><aid="captchaButton2">点击弹出验证窗口</a>
结果
同一页面上可以同时存在两个或多个验证码，相互不冲突。
相关链接
官方地址：凯格行为验证码（KgCaptcha）滑动拼图验证，无感验证码，文字点选验证码
在线体验：凯格行为验证码在线体验
开发文档：凯格行为验证码-开发文档
