同一页面多次调用验证码

缘由

一个页面需要两个验证码，使用同一个验证码调用两次会导致有前一个失效。那么我们需要创建不同的两个验证码，分别做验证。

截图展示

具体实现

• 同时引入多个KgCaptcha的js。
• 引入多个JS时，请定义 plural 参数；通过该参数区分定义对象名，如plural=1，则对象名为kg1，以此类推。

1<script src="captcha.js?appid=XXX&plural=1" id="KgCaptcha1"></script>
2<script src="captcha.js?appid=XXX&plural=2" id="KgCaptcha2"></script>

• 初始化验证码

1<script type="text/javascript">
2
3// 第一个验证码
4kg1.captcha({
5    // 绑定元素，验证框显示区域
6    bind: "#captchaBox1",
7    // 验证成功事务处理
8    success: function(e) {
9        console.log(e);
10    },
11    // 验证失败事务处理
12    failure: function(e) {
13        console.log(e);
14    },
15    // 点击刷新按钮时触发
16    refresh: function(e) {
17        console.log(e);
18    }
19}); 
20
21// 第二个验证码
22kg2.captcha({
23    // 绑定元素，验证框显示区域
24    bind: "#captchaBox2",
25    // 验证成功事务处理
26    success: function(e) {
27        console.log(e);
28    },
29    // 验证失败事务处理
30    failure: function(e) {
31        console.log(e);
32    },
33    // 点击刷新按钮时触发
34    refresh: function(e) {
35        console.log(e);
36    }
37}); 
38
39</script>

• 创建验证框显示区域

1<!-- 第一个验证码 -->
2<div id="captchaBox1"></div>
3<!-- 第二个验证码 -->
4<div id="captchaBox2"></div>

总结

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