JS實現(xiàn)PC手機端和嵌入式滑動拼圖驗證碼三種效果
PC和手機端網(wǎng)站滑動拼圖驗證碼效果源碼,同時包涵了彈出式Demo,使用ajax形式提交二次驗證碼所需的驗證結(jié)果值,嵌入式Demo,使用表單形式提交二次驗證所需的驗證結(jié)果值,移動端手動實現(xiàn)彈出式Demo三種效果
首先要確認(rèn)前端使用頁面,比如登陸頁面
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="http://static.geetest.com/static/tools/gt.js"></script>
1.在登陸頁面訪問引入類庫: 如果您的網(wǎng)站使用https,則只需要將引入極驗庫的地方換成https協(xié)議即可,不需要更改其它地方。例如更換成以下代碼即可:
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://static.geetest.com/static/tools/gt.js"></script>
2.初始化前端 下面的代碼需要在頁面加載后就執(zhí)行,如果你使用jQuery,可以寫在$(function(){});
$.ajax({ // 獲取id,challenge,success(是否啟用failback) url: "../web/StartCaptchaServlet.php?t=" + (new Date()).getTime(), // 加隨機數(shù)防止緩存 type: "get", dataType: "json", success: function (data) { // 使用initGeetest接口 // 參數(shù)1:配置參數(shù) // 參數(shù)2:回調(diào),回調(diào)的第一個參數(shù)驗證碼對象,之后可以使用它做appendTo之類的事件 initGeetest({ gt: data.gt, challenge: data.challenge, product: "popup", // 產(chǎn)品形式,包括:float,embed,popup。注意只對PC版驗證碼有效 offline: !data.success // 表示用戶后臺檢測極驗服務(wù)器是否宕機,與SDK配合,用戶一般不需要關(guān)注 }, handlerPopup); } });
上面代碼的意思是說,頁面加載后,需要到你指定的URL地址上獲得驗證碼信息,至于上面的URL地址“../web/StartCaptchaServlet.PHP”里面寫了什么內(nèi)容,這個我們在服務(wù)器端代碼部署會詳細說明。 但是需要說明的是,上面的代碼里有一個回調(diào)函數(shù)叫“handlerPopup”,這個函數(shù)是你需要驗證碼的真正初始化代碼:如下:
// 代碼詳細說明 var handlerPopup = function (captchaObj) { // 注冊提交按鈕事件,比如在登陸頁面的登陸按鈕 $("#popup-submit").click(function () { // 此處省略在登陸界面中,獲取登陸數(shù)據(jù)的一些步驟 // 先校驗是否點擊了驗證碼 var validate = captchaObj.getValidate(); if (!validate) { alert('請先完成驗證!'); return; } // 提交驗證碼信息,比如登陸頁面,你需要提交登陸信息,用戶名和密碼等登陸數(shù)據(jù) $.ajax({ url: "../web/VerifyLoginServlet.php", type: "post", // dataType: "json", data: { // 用戶名和密碼等其他數(shù)據(jù),自己獲取,不做演示 username:username, password:password, // 驗證碼數(shù)據(jù),這些數(shù)據(jù)不用自己獲取 // 這是二次驗證所需的三個值 // 當(dāng)然,你也可以直接設(shè)置驗證碼單獨校驗,省略其他信息 geetest_challenge: validate.geetest_challenge, geetest_validate: validate.geetest_validate, geetest_seccode: validate.geetest_seccode }, // 這里是正確返回處理結(jié)果的處理函數(shù) // 假設(shè)你就返回了1,2,3 // 當(dāng)然,正常情況是返回JSON數(shù)據(jù) success: function (result) { // 1表示驗證碼驗證失敗 if (result == "1") { alert("驗證碼驗證失敗!"); }else if (result == "2") { alert("用戶名或密碼錯誤!"); }else if (result == "3") { alert("登陸成功!"); // 登陸成功了,可以在這里做其他處理 }else{ alert("登陸錯誤!"); } } }); }); // 彈出式需要綁定觸發(fā)驗證碼彈出按鈕 // 比如在登陸頁面,這個觸發(fā)按鈕就是登陸按鈕 captchaObj.bindOn("#popup-submit"); // 將驗證碼加到id為captcha的元素里 // 驗證碼將會在下面指定的元素中顯示出來 captchaObj.appendTo("#popup-captcha"); // 更多接口參考:http://www.geetest.com/install/sections/idx-client-sdk.html };
以上所述是小編給大家介紹的JS實現(xiàn)PC手機端和嵌入式滑動拼圖驗證碼三種效果.希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
文本框只能輸入數(shù)字的實現(xiàn)方法(兼容IE火狐)
下面小編就為大家?guī)硪黄谋究蛑荒茌斎霐?shù)字的實現(xiàn)方法(兼容IE火狐)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06微信小程序wx.getUserInfo授權(quán)獲取用戶信息(頭像、昵稱)的實現(xiàn)
這篇文章主要介紹了微信小程序wx.getUserInfo授權(quán)獲取用戶信息(頭像、昵稱)的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08bootstrap模態(tài)框跳轉(zhuǎn)到當(dāng)前模板頁面 框消失了而背景存在問題的解決方法
這篇文章主要介紹了bootstrap模態(tài)框跳轉(zhuǎn)到當(dāng)前模板頁面,框消失了,而背景依然存在問題的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12