vue中使用极验验证码的方法（附demo）

网络编程 2021-07-04 15:02www.168986.cn编程入门

这篇文章主要介绍了vue中使用极验验证码的方法（附demo）本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

前言

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--hangzhou.aliyuncs./activity/mon_js/lib/jquery.min.js"></script>
  <script src="http://static.geetest./static/tools/gt.js"></script>
  <script src="https://cdn.jsdelivr./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./user/getCheckCode",
            suess: 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();
                  })
                }).onSuess(function() {
                  var result = captchaObj.getValidate();
                  if(!result) {
                    log("出错啦，请先完成验证！")
                  } else {
                    log("ok")
                    //验证通过后的业务逻辑
                    //......
                  }
                }).onError(function() {
                  console("出错啦，请稍后重试！")
                  //监听验证出错事件，提供用户或者刷新页面重试
                }).onClose(function() {
                  //对于product为bind形式的验证。当用户关闭弹出来的验证时，会触发该回调。
                });
              })
            }
          });
        }
      }
    })
  </script>
</html>

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

以上所述是长沙网络推广给大家介绍的vue中使用极验验证码的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！
如果你觉得本文对你有帮助，欢迎网络推广网站推广转载，烦请注明出处，谢谢！

上一篇：微信小程序request请求封装，验签代码实例下一篇：基于vue-cli3创建libs库的实现方法

vue中使用极验验证码的方法（附demo）

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

vue中使用极验验证码的方法（附demo）

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设