JavaScript

超轻量级php框架startmvc

vue中使用极验验证码的方法(附demo)

更新时间:2020-09-24 21:48:01 作者:startmvc
前言: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中使用极验验证码的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!