同一页面生成多个验证码
生成 页面 多个 验证码 同一
2023-06-13 09:18:09 时间
缘由
一个页面需要两个验证码,使用同一个验证码调用两次会导致有前一个失效。那么我们需要创建不同的两个验证码,分别做验证。
截图展示
具体实现
- 同时引入多个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/
相关文章
- POSTMAN自动生成接口文档_swagger自动生成接口文档
- 清理电脑反复生成的临时文件
- 在Python中生成随机数据
- 小站工具2.0|单基因生存期曲线图+ROC,重点是根据批量生成的单因素COX与AUC结果筛选~回复:SUV,可获得测试文件!
- Texturify:基于 GAN在 3D 形状表面上生成高质量纹理! 论文速递2022.8.30!
- 【组合数学】指数生成函数 ( 指数生成函数性质 | 指数生成函数求解多重集排列 )
- 【错误记录】Google Play 上架报错 ( 对于在 APK 中使用该权限的应用,您必须设置隐私权政策 | 生成并托管 隐私政策 )
- 【Android Gradle 插件】将自定义 Gradle 插件上传到自建 Maven 仓库 ② ( java 和 groovy 插件自带文档任务 | 自定义文档打包任务 | 生成文档包 )
- Java唯一码生成详解编程语言
- Oracle自动创建主键,省心又省力(oracle自动生成主键)
- 器基于C语言与MySQL的实体生成器的开发(c mysql实体生成)
- 生成静态页面的PHP类
- 网站生成静态页面攻略2:数据采集
- 网站生成静态页面攻略4:防采集而不防搜索引擎策略
- 生成静态页面的PHP类
- PHP生成静态页面详解
- ASP生成静态htm页面基本代码
- asp.net验证码生成和刷新及验证
- 使用ASP.NET模板生成HTML静态页面的五种方案
- 114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
- asp.net生成验证码(纯数字)
- mysql通过ssl的方式生成秘钥具体生成步骤
- Asp.net动态生成html页面的方法分享
- webserver使用php生成web页面的三种方法总结
- c#生成站点地图(SiteMapPath)文件示例程序
- php生成静态页面的简单示例
- yii实现图片上传及缩略图生成的方法