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

2017-03-17 admin

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

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

<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中文网网站的支持!

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-2068.html

文章标题:JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果

相关文章
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; style=&quot;width: 100%; height:100%;&quot;&gt...
2017-02-17
前端交流QQ群
我们建立了一个前端交流QQ群供大家交流,有什么问题都可以在群里提问,欢迎你的加入,也希望我们大家能够在群里互帮互助,同时也能学到东西。 我们相信,前端有你更精彩! 为了让更多的小伙伴加入我们,欢迎大家转发扩散! 长按以上二维码加入我们 ...
2016-04-01
回到顶部