vue中使用极验验证码的方法(附demo)


Posted in Javascript onDecember 04, 2019

前言:

vue中使用极验验证码,最好是在页面渲染的时候(mounted)进行验证码的初始化,然后在初始化回调中绑定触发弹出验证码的事件。这样在点击按钮或者进行特定操作时能够快速的弹出验证码。

关键代码:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=0">
    <title>极验使用实例</title>
  </head>

  <body>
    <div id="app">
      <div class="item">
        <h4>bind(隐藏式)</h4>
        <button id="btn">提交</button>
      </div>
    </div>
  </body>
  <script src="https://magicactivity.oss-cn-hangzhou.aliyuncs.com/activity/common_js/lib/jquery.min.js"></script>
  <script src="http://static.geetest.com/static/tools/gt.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let {
      log
    } = console
    Vue.config.silent = false;
    Vue.config.devtools = true;
    var app = new Vue({
      el: '#app',
      data: {},
      created: function() {},
      mounted: function() {
        this.init()
      },
      methods: {
        init() {
          $.ajax({
            url: "http://xxx.cn/user/getCheckCode",
            success: function(data) {
              var data = data.d
              initGeetest({
                // 以下配置参数来自服务端 SDK
                gt: data.gtId,
                challenge: data.gtTrans,
                offline: data.offline == 1 ? true : false, //极验API服务器是否宕机 false:宕机
                new_captcha: true,
                https: false,
                product: "bind" // 产品形式,包括:float,popup
              }, function(captchaObj) {
                captchaObj.onReady(function() {
                  $("#btn").click(function() {
                    captchaObj.verify();
                  })
                }).onSuccess(function() {
                  var result = captchaObj.getValidate();
                  if(!result) {
                    log("出错啦,请先完成验证!")
                  } else {
                    log("ok")
                    //验证通过后的业务逻辑
                    //......
                  }
                }).onError(function() {
                  console("出错啦,请稍后重试!")
                  //监听验证出错事件,提供用户或者刷新页面重试
                }).onClose(function() {
                  //对于product为bind形式的验证。当用户关闭弹出来的验证时,会触发该回调。
                });
              })
            }
          });
        }
      }
    })
  </script>
</html>

如上,在页面渲染的时候就进行验证码初始化,这样在点击按钮的时候就能快速的弹出验证码。但是,如果后端无法拿到uuid,而需要输入手机号码之类的账号进行验证,那么就需要在用户输入手机号码之后才能进行初始化了。这样的话,也就只能再获取到用户输入的手机号之后才能进行验证码初始化了。但是,在用户输入手机号码之后进行初始化,验证码弹窗弹出会有些延迟,在初始化之前进行loading就好了,初始化完成后隐藏loading,体验就会好一些。

总结

以上所述是小编给大家介绍的vue中使用极验验证码的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
javascript对象的property和prototype是这样一种关系
Mar 24 Javascript
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 #Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 #Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 #Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 #jQuery
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 #Javascript
Vue实现base64编码图片间的切换功能
Dec 04 #Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 #Javascript
You might like
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
Python实现类继承实例
2014/07/04 Python
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
python 输出上个月的月末日期实例
2018/04/11 Python
Python骚操作之动态定义函数
2019/03/26 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
NumPy排序的实现
2020/01/21 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
keras.layer.input()用法说明
2020/06/16 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
探亲假请假条
2014/04/11 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
教师调动申请报告
2015/05/18 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang