溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言：
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">
<h5>bind（隱藏式）</h5>
<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中使用極驗驗證碼的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
