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 相关文章推荐
JavaScript 乱码问题
Aug 06 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
浅谈javascript的分号的使用
May 12 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 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
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
PHP中的类型约束介绍
2015/05/11 PHP
php获取linux命令结果的实例
2017/03/13 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
javascript textContent与innerText的异同分析
2010/10/22 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
js 走马灯简单实例
2013/11/21 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
easy_install python包安装管理工具介绍
2013/02/10 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
Css3圆角边框制作代码
2015/11/18 HTML / CSS
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
C++面试题目
2013/06/25 面试题
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
离职报告范文
2014/11/04 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
四年级作文之植物
2019/09/20 职场文书