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对象创建及继承原理实例解剖
Feb 28 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 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设计模式之模板模式定义与用法详解
2018/12/20 PHP
JS中style属性
2006/10/11 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
python实现从web抓取文档的方法
2014/09/26 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
初中物理教学反思
2014/01/14 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
委托书的格式
2014/08/01 职场文书
学习礼仪心得体会
2014/09/01 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
出差报告范文
2014/11/06 职场文书
培训师岗位职责
2015/02/14 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
中学社团活动总结
2015/05/07 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python