共计 889 个字符,预计需要花费 3 分钟才能阅读完成。
原因
一个页面须要两个验证码,应用同一个验证码调用两次会导致有前一个生效。那么咱们须要创立不同的两个验证码,别离做验证。
截图展现
具体实现
- 同时引入多个 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/
正文完