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 相关文章推荐
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
jQuery自定义数值抽奖活动代码
Jun 11 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 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通过COM使用ADODB的简单例子
2006/12/31 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
思想品德课教学反思
2014/02/10 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
激励口号大全
2014/06/17 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技