登录  /  注册
博主信息
博文 16
粉丝 0
评论 0
访问量 5030
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
同一页面生成多个验证码
原创
210人浏览过

缘由

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

截图展示

具体实现

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

总结

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

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学