vue中使用极验验证码的方法（附demo）
程序员文章站
2022-03-18 17:01:40
前言：
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中使用极验验证码的方法，希望对大家有所帮助