您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)JS如何實(shí)現(xiàn)PC手機(jī)端和嵌入式滑動(dòng)拼圖驗(yàn)證碼三種效果,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
PC和手機(jī)端網(wǎng)站滑動(dòng)拼圖驗(yàn)證碼效果源碼,同時(shí)包涵了彈出式Demo,使用ajax形式提交二次驗(yàn)證碼所需的驗(yàn)證結(jié)果值,嵌入式Demo,使用表單形式提交二次驗(yàn)證所需的驗(yàn)證結(jié)果值,移動(dòng)端手動(dòng)實(shí)現(xiàn)彈出式Demo三種效果
首先要確認(rèn)前端使用頁(yè)面,比如登陸頁(yè)面
<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.在登陸頁(yè)面訪問(wèn)引入類庫(kù): 如果您的網(wǎng)站使用https,則只需要將引入極驗(yàn)庫(kù)的地方換成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.初始化前端 下面的代碼需要在頁(yè)面加載后就執(zhí)行,如果你使用jQuery,可以寫在$(function(){});
$.ajax({ // 獲取id,challenge,success(是否啟用failback) url: "../web/StartCaptchaServlet.php?t=" + (new Date()).getTime(), // 加隨機(jī)數(shù)防止緩存 type: "get", dataType: "json", success: function (data) { // 使用initGeetest接口 // 參數(shù)1:配置參數(shù) // 參數(shù)2:回調(diào),回調(diào)的第一個(gè)參數(shù)驗(yàn)證碼對(duì)象,之后可以使用它做appendTo之類的事件 initGeetest({ gt: data.gt, challenge: data.challenge, product: "popup", // 產(chǎn)品形式,包括:float,embed,popup。注意只對(duì)PC版驗(yàn)證碼有效 offline: !data.success // 表示用戶后臺(tái)檢測(cè)極驗(yàn)服務(wù)器是否宕機(jī),與SDK配合,用戶一般不需要關(guān)注 }, handlerPopup); } });
上面代碼的意思是說(shuō),頁(yè)面加載后,需要到你指定的URL地址上獲得驗(yàn)證碼信息,至于上面的URL地址“../web/StartCaptchaServlet.PHP”里面寫了什么內(nèi)容,這個(gè)我們?cè)诜?wù)器端代碼部署會(huì)詳細(xì)說(shuō)明。 但是需要說(shuō)明的是,上面的代碼里有一個(gè)回調(diào)函數(shù)叫“handlerPopup”,這個(gè)函數(shù)是你需要驗(yàn)證碼的真正初始化代碼:如下:
// 代碼詳細(xì)說(shuō)明 var handlerPopup = function (captchaObj) { // 注冊(cè)提交按鈕事件,比如在登陸頁(yè)面的登陸按鈕 $("#popup-submit").click(function () { // 此處省略在登陸界面中,獲取登陸數(shù)據(jù)的一些步驟 // 先校驗(yàn)是否點(diǎn)擊了驗(yàn)證碼 var validate = captchaObj.getValidate(); if (!validate) { alert('請(qǐng)先完成驗(yàn)證!'); return; } // 提交驗(yàn)證碼信息,比如登陸頁(yè)面,你需要提交登陸信息,用戶名和密碼等登陸數(shù)據(jù) $.ajax({ url: "../web/VerifyLoginServlet.php", type: "post", // dataType: "json", data: { // 用戶名和密碼等其他數(shù)據(jù),自己獲取,不做演示 username:username, password:password, // 驗(yàn)證碼數(shù)據(jù),這些數(shù)據(jù)不用自己獲取 // 這是二次驗(yàn)證所需的三個(gè)值 // 當(dāng)然,你也可以直接設(shè)置驗(yàn)證碼單獨(dú)校驗(yàn),省略其他信息 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表示驗(yàn)證碼驗(yàn)證失敗 if (result == "1") { alert("驗(yàn)證碼驗(yàn)證失??!"); }else if (result == "2") { alert("用戶名或密碼錯(cuò)誤!"); }else if (result == "3") { alert("登陸成功!"); // 登陸成功了,可以在這里做其他處理 }else{ alert("登陸錯(cuò)誤!"); } } }); }); // 彈出式需要綁定觸發(fā)驗(yàn)證碼彈出按鈕 // 比如在登陸頁(yè)面,這個(gè)觸發(fā)按鈕就是登陸按鈕 captchaObj.bindOn("#popup-submit"); // 將驗(yàn)證碼加到id為captcha的元素里 // 驗(yàn)證碼將會(huì)在下面指定的元素中顯示出來(lái) captchaObj.appendTo("#popup-captcha"); // 更多接口參考:http://www.geetest.com/install/sections/idx-client-sdk.html };
關(guān)于“JS如何實(shí)現(xiàn)PC手機(jī)端和嵌入式滑動(dòng)拼圖驗(yàn)證碼三種效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。