JS实现PC手机端和嵌入式滑动拼图验证码三种效果


Posted in Javascript onFebruary 15, 2017

PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果

JS实现PC手机端和嵌入式滑动拼图验证码三种效果

首先要确认前端使用页面,比如登陆页面

<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> 
<script src="http://static.geetest.com/static/tools/gt.js"></script>

1.在登陆页面访问引入类库: 如果您的网站使用https,则只需要将引入极验库的地方换成https协议即可,不需要更改其它地方。例如更换成以下代码即可:

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
<script src="https://static.geetest.com/static/tools/gt.js"></script>

2.初始化前端 下面的代码需要在页面加载后就执行,如果你使用jQuery,可以写在$(function(){});

$.ajax({ 
 // 获取id,challenge,success(是否启用failback) 
 url: "../web/StartCaptchaServlet.php?t=" + (new Date()).getTime(), // 加随机数防止缓存 
 type: "get", 
 dataType: "json", 
 success: function (data) { 
  // 使用initGeetest接口 
  // 参数1:配置参数 
  // 参数2:回调,回调的第一个参数验证码对象,之后可以使用它做appendTo之类的事件 
  initGeetest({ 
   gt: data.gt, 
   challenge: data.challenge, 
   product: "popup", // 产品形式,包括:float,embed,popup。注意只对PC版验证码有效 
   offline: !data.success // 表示用户后台检测极验服务器是否宕机,与SDK配合,用户一般不需要关注 
  }, handlerPopup); 
 } 
});

上面代码的意思是说,页面加载后,需要到你指定的URL地址上获得验证码信息,至于上面的URL地址“../web/StartCaptchaServlet.PHP”里面写了什么内容,这个我们在服务器端代码部署会详细说明。 但是需要说明的是,上面的代码里有一个回调函数叫“handlerPopup”,这个函数是你需要验证码的真正初始化代码:如下:

// 代码详细说明 
var handlerPopup = function (captchaObj) { 
 // 注册提交按钮事件,比如在登陆页面的登陆按钮 
 $("#popup-submit").click(function () { 
  // 此处省略在登陆界面中,获取登陆数据的一些步骤 
   
  // 先校验是否点击了验证码 
  var validate = captchaObj.getValidate(); 
  if (!validate) { 
   alert('请先完成验证!'); 
   return; 
  } 
  // 提交验证码信息,比如登陆页面,你需要提交登陆信息,用户名和密码等登陆数据 
  $.ajax({ 
   url: "../web/VerifyLoginServlet.php", 
   type: "post", 
   // dataType: "json", 
   data: { 
    // 用户名和密码等其他数据,自己获取,不做演示 
    username:username, 
    password:password, 
    // 验证码数据,这些数据不用自己获取 
    // 这是二次验证所需的三个值 
    // 当然,你也可以直接设置验证码单独校验,省略其他信息 
    geetest_challenge: validate.geetest_challenge, 
    geetest_validate: validate.geetest_validate, 
    geetest_seccode: validate.geetest_seccode 
   }, 
   // 这里是正确返回处理结果的处理函数 
   // 假设你就返回了1,2,3 
   // 当然,正常情况是返回JSON数据 
   success: function (result) { 
    // 1表示验证码验证失败 
    if (result == "1") { 
     alert("验证码验证失败!"); 
    }else if (result == "2") { 
     alert("用户名或密码错误!"); 
    }else if (result == "3") { 
     alert("登陆成功!"); 
     // 登陆成功了,可以在这里做其他处理 
    }else{ 
     alert("登陆错误!"); 
    } 
   } 
  }); 
 }); 
 // 弹出式需要绑定触发验证码弹出按钮 
 // 比如在登陆页面,这个触发按钮就是登陆按钮 
 captchaObj.bindOn("#popup-submit"); 
  
 // 将验证码加到id为captcha的元素里 
 // 验证码将会在下面指定的元素中显示出来 
 captchaObj.appendTo("#popup-captcha"); 
 // 更多接口参考:http://www.geetest.com/install/sections/idx-client-sdk.html 
};

以上所述是小编给大家介绍的JS实现PC手机端和嵌入式滑动拼图验证码三种效果.希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 #Javascript
javascript中apply/call和bind的使用
Feb 15 #Javascript
JS实现图片放大缩小的方法
Feb 15 #Javascript
JavaScript中的编码和解码函数
Feb 15 #Javascript
js date 格式化
Feb 15 #Javascript
JS实现最简单的冒泡排序算法
Feb 15 #Javascript
javascript设计模式之单体模式学习笔记
Feb 15 #Javascript
You might like
让PHP支持页面回退的两种方法
2008/01/10 PHP
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
php实现源代码加密的方法
2015/07/11 PHP
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
Python中使用中文的方法
2011/02/19 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
python扫描线填充算法详解
2020/02/19 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
德尔福集团DELPHI的笔试题
2012/02/22 面试题
家长对学生的评语
2014/04/18 职场文书
电视节目策划方案
2014/05/16 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
办公室管理规章制度
2015/08/04 职场文书
mysq启动失败问题及场景分析
2021/07/15 MySQL
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android