vue中使用极验验证码的方法(附demo)
程序员文章站
2022-06-23 18:26:33
前言:
vue中使用极验验证码,最好是在页面渲染的时候(mounted)进行验证码的初始化,然后在初始化回调中绑定触发弹出验证码的事件。这样在点击按钮或者进行特定操作时能够快速的弹出...
前言:
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中使用极验验证码的方法,希望对大家有所帮助
上一篇: 服务器应用自动重新启动IIS批处理 原创