同一页面生成多个验证码

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

缘由

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


截图展示

5.PNG


具体实现

  • 同时引入多个KgCaptcha的js。
  • 引入多个JS时,请定义 plural 参数;通过该参数区分定义对象名,如plural=1,则对象名为kg1,以此类推。
<scriptsrc="captcha.js?appid=XXX&plural=1"id="KgCaptcha1"></script><scriptsrc="captcha.js?appid=XXX&plural=2"id="KgCaptcha2"></script>

  • 初始化验证码
<scripttype="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>

  • 创建验证框显示区域
<!-- 第一个验证码 --><divid="captchaBox1"></div><!-- 第二个验证码 --><divid="captchaBox2"></div>


总结

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

目录
打赏
0
0
0
0
0
分享
相关文章
验证码倒计时的注册页面
验证码倒计时的注册页面
56 0
|
3月前
|
C#
C# 图形验证码实现登录校验代码
C# 图形验证码实现登录校验代码
135 2
浅谈 前端验证码那些事
浅谈 前端验证码那些事
70 0
认证服务---整合短信验证码,验证码倒计时,验证码防刷校验 【一】
这篇文章介绍了如何在分布式微服务项目中整合短信验证码服务,包括使用阿里云短信验证接口、将短信验证功能集成到第三方服务中、其他服务的远程调用,以及通过Redis实现验证码防刷机制的代码实现和遇到的问题解决方案。
JavaSwing实现验证码功能
在Web应用程序开发中,验证码(CAPTCHA)是一种常见的安全措施,用于防止自动化机器人和恶意软件对网站进行攻击。本文将介绍如何使用JavaSwing来实现验证码功能,以帮助您加强Web应用程序的安全性。
129 0
文字验证码:简单有效的账号安全守卫!
文字验证码不仅是一种简单易懂的验证方式,同时也是保护您的账号安全的重要工具。通过输入正确的文字组合,您可以有效地确认自己的身份,确保只有真正的用户才能访问您的账号。
行为验证码小图标修改
最近行为验证码在很多网站逐步流行起来,对用户体验来说,比较新颖,操作简单。下面我以滑动拼图验证码和文字点选验证码为例,通过 KgCaptcha 来说说如何修改验证码中的图标。
行为验证码小图标修改
推荐一个非常好的行为验证码项目!
KgCaptcha 结合了设备指纹、行为特征、访问频率、地理位置等多项技术,有效的拦截恶意登录、批量注册,阻断机器操作,拦截非正常用户。较传统验证码相比,用户无需再经过思考或输入操作,只需轻轻一滑即可进行验证。
推荐一个非常好的行为验证码项目!
实现登录时进行校验验证码的功能
JavaEE中,实现登录时进行校验验证码的功能(图文并茂!!!)
实现登录时进行校验验证码的功能
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等