## 缘由

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

## 截图展示

![](http://img.blog.itpub.net/blog/2023/03/31/617caa7fe70ab42c.png?x-oss-process=style/bb)

## 具体实现

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

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

- 初始化验证码

```javascript
<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>
```

- 创建验证框显示区域

```javascript

<div id="captchaBox1"></div>

<div id="captchaBox2"></div>
```

## 总结

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

ITPub博客

同一页面生成多个验证码

最新文章