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 相关文章推荐
动态表格Table类的实现
Aug 26 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
vue实现微信分享功能
Nov 28 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 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 连接mysql连接被重置的解决方法
2011/02/15 PHP
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
Python的SQLAlchemy框架使用入门
2015/04/29 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
python 拼接文件路径的方法
2018/10/23 Python
python函数的作用域及关键字详解
2019/08/20 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
采用怎样的方法保证数据的完整性
2013/12/02 面试题
应用艺术毕业生的自我评价
2013/12/04 职场文书
个人查摆剖析材料
2014/10/16 职场文书
销售2014年度工作总结
2014/12/08 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
什么是Python装饰器?如何定义和使用?
2022/04/11 Python