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 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
JS重要知识点小结
Nov 06 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
javascript的几种写法总结
Sep 30 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
layui table 表格模板按钮的实例代码
Sep 21 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 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实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
Javascript 类与静态类的实现
2010/04/01 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
wxPython之解决闪烁的问题
2018/01/15 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
详解python中递归函数
2019/04/16 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
Django多数据库的实现过程详解
2019/08/01 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
python-地图可视化组件folium的操作
2020/12/14 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
一个入门级python爬虫教程详解
2021/01/27 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
高一自我鉴定
2013/12/17 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
假面舞会策划方案
2014/05/29 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android