JS如何實現PC手機端和嵌入式滑動拼圖驗證碼三種效果

這篇文章將為大家詳細講解有關JS如何實現PC手機端和嵌入式滑動拼圖驗證碼三種效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

PC和手機端網站滑動拼圖驗證碼效果源碼，同時包涵了彈出式Demo，使用ajax形式提交二次驗證碼所需的驗證結果值，嵌入式Demo，使用表單形式提交二次驗證所需的驗證結果值，移動端手動實現彈出式Demo三種效果

首先要確認前端使用頁面，比如登陸頁面

<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.在登陸頁面訪問引入類庫： 如果您的網站使用https，則只需要將引入極驗庫的地方換成https協議即可，不需要更改其它地方。例如更換成以下代碼即可：

<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.初始化前端 下面的代碼需要在頁面加載后就執行，如果你使用jQuery，可以寫在$(function(){});

$.ajax({ 
 // 獲取id，challenge，success（是否啟用failback） 
 url: "../web/StartCaptchaServlet.php?t=" + (new Date()).getTime(), // 加隨機數防止緩存 
 type: "get", 
 dataType: "json", 
 success: function (data) { 
  // 使用initGeetest接口 
  // 參數1：配置參數 
  // 參數2：回調，回調的第一個參數驗證碼對象，之后可以使用它做appendTo之類的事件 
  initGeetest({ 
   gt: data.gt, 
   challenge: data.challenge, 
   product: "popup", // 產品形式，包括：float，embed，popup。注意只對PC版驗證碼有效 
   offline: !data.success // 表示用戶后臺檢測極驗服務器是否宕機，與SDK配合，用戶一般不需要關注 
  }, handlerPopup); 
 } 
});

上面代碼的意思是說，頁面加載后，需要到你指定的URL地址上獲得驗證碼信息,至于上面的URL地址“../web/StartCaptchaServlet.PHP”里面寫了什么內容，這個我們在服務器端代碼部署會詳細說明。 但是需要說明的是，上面的代碼里有一個回調函數叫“handlerPopup”，這個函數是你需要驗證碼的真正初始化代碼：如下：

// 代碼詳細說明 
var handlerPopup = function (captchaObj) { 
 // 注冊提交按鈕事件，比如在登陸頁面的登陸按鈕 
 $("#popup-submit").click(function () { 
  // 此處省略在登陸界面中，獲取登陸數據的一些步驟 
   
  // 先校驗是否點擊了驗證碼 
  var validate = captchaObj.getValidate(); 
  if (!validate) { 
   alert('請先完成驗證！'); 
   return; 
  } 
  // 提交驗證碼信息，比如登陸頁面，你需要提交登陸信息，用戶名和密碼等登陸數據 
  $.ajax({ 
   url: "../web/VerifyLoginServlet.php", 
   type: "post", 
   // dataType: "json", 
   data: { 
    // 用戶名和密碼等其他數據，自己獲取，不做演示 
    username:username, 
    password:password, 
    // 驗證碼數據，這些數據不用自己獲取 
    // 這是二次驗證所需的三個值 
    // 當然，你也可以直接設置驗證碼單獨校驗，省略其他信息 
    geetest_challenge: validate.geetest_challenge, 
    geetest_validate: validate.geetest_validate, 
    geetest_seccode: validate.geetest_seccode 
   }, 
   // 這里是正確返回處理結果的處理函數 
   // 假設你就返回了1，2，3 
   // 當然，正常情況是返回JSON數據 
   success: function (result) { 
    // 1表示驗證碼驗證失敗 
    if (result == "1") { 
     alert("驗證碼驗證失敗！"); 
    }else if (result == "2") { 
     alert("用戶名或密碼錯誤！"); 
    }else if (result == "3") { 
     alert("登陸成功！"); 
     // 登陸成功了，可以在這里做其他處理 
    }else{ 
     alert("登陸錯誤！"); 
    } 
   } 
  }); 
 }); 
 // 彈出式需要綁定觸發驗證碼彈出按鈕 
 // 比如在登陸頁面，這個觸發按鈕就是登陸按鈕 
 captchaObj.bindOn("#popup-submit"); 
  
 // 將驗證碼加到id為captcha的元素里 
 // 驗證碼將會在下面指定的元素中顯示出來 
 captchaObj.appendTo("#popup-captcha"); 
 // 更多接口參考：http://www.geetest.com/install/sections/idx-client-sdk.html 
};

關于“JS如何實現PC手機端和嵌入式滑動拼圖驗證碼三種效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。