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 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 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 zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
javascript string字符串优化问题
2011/07/31 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
[19:15]DK战队纪录片
2014/09/02 DOTA
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
Python简明入门教程
2015/08/04 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
Python自定义线程类简单示例
2018/03/23 Python
python调用百度语音REST API
2018/08/30 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
销售高级职员求职信
2013/10/29 职场文书
保安自我鉴定范文
2013/12/08 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
工商治理实习生的自我评价
2014/01/15 职场文书
行政助理工作职责范本
2014/03/04 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB