頁面添加滑動驗證碼

增加後的效果如圖所示：

因爲項目需要，需要在註冊頁面添加滑動驗證碼。所以在此記錄一下。我這裏寫的都是前端需要添加的代碼。

1、首頁引用極驗驗證碼所需的js文件。

需要注意的是：如果網站是http協議則引用

如果網站是https協議，則引用

2、前端html代碼：

在需要添加驗證碼的地方添加如下：

這個的作用是：沒加載出來滑動驗證碼時，現在“”正在加載驗證碼的...“”的文字

<div id="captcha1">
  <p id="wait1" class="show">正在加載驗證碼......</p>
</div>

這個的作用是：當沒完成滑動驗證碼的時候，點擊“”獲取手機驗證碼“”的提示（我這個是該事件綁定在獲取手機驗證碼的按鈕上了，所以在未完成滑動驗證碼之前，點擊獲取手機驗證碼，會提示該文字。如果你是綁定在提交上，則，點擊提交時會提示該文字。）

<div>
  <p id="notice1" class="hide">請先完成驗證</p>

</div>

3、前端js代碼：

 $.ajax({
    url: "/xxx/StartCaptchaServlet?t=" + (new Date()).getTime(), // 加隨機數防止緩存
    type: "get",
    dataType: "json",
    success: function (data) {
      console.log(data);
      alert('111'); //我這樣是爲了調試看看接口成功與否。成功則會彈出111
      // 調用 initGeetest 初始化參數
      // 參數1：配置參數
      // 參數2：回調，回調的第一個參數驗證碼對象，之後可以使用它調用相應的接口
      initGeetest({
        gt: data.gt,
        challenge: data.challenge,
        new_captcha: data.new_captcha, // 用於宕機時表示是新驗證碼的宕機
        offline: !data.success, // 表示用戶後臺檢測極驗服務器是否宕機，一般不需要關注
        product: "popup", // 產品形式，包括：float，popup
        width: "100%"
        // 更多配置參數請參見：http://www.geetest.com/install/sections/idx-client-sdk.html#config
      }, handler1);
    }
  });

//滑動驗證碼
var handler1=function (captchaObj) {
   alert('222');//同樣也是爲了測試是否調用。

//我這個項目是將該事件添加到了獲取手機驗證碼上。s所以這個click的事件就寫在獲取手機驗證碼的按鈕上。

//就是你想把這個添加到哪個上面，你點擊的就寫哪個按鈕
  $("#getphotocodeCode1").click(function () {
    var result = captchaObj.getValidate();
    if (!result) {
      $("#notice1").show();
      setTimeout(function () {
        $("#notice1").hide();
      }, 2000);
    }else{
     //這個地方寫一些需要做的操作。比如我的項目，是在獲取手機驗證碼之前需要判斷手機號、密碼等，那麼這麼判斷就寫在這裏
      var mytimestamp = new Date().getTime();
      /*sendRanVerifiCode 發送手機/郵箱驗證碼*/
      var myajax=$.ajax({
        type: "post",
        url: "/xxx/xxx.do",
        timeout:15000,

       //記住加上以下三個參數
        data :'"&geetest_challenge=" + result.geetest_challenge+"&geetest_validate="+result.geetest_validate+"&geetest_seccode="+result.geetest_seccode,
        //data:'',
        dataType: "json",
        "contentType": "application/x-www-form-urlencoded; charset=utf-8",
        success: function(data) {
          if (data.code=='success') {
            jybtools.showmsg("發送成功");
          }else{
            jybtools.showmsg(data.msg,1);
          }
        },
        complete : function(XMLHttpRequest, Status) {
          if(Status!='success'){//超時,status還有success,error等值的情況
            myajax.abort(); //取消請求
            console.log(Status);
          }else{
          }
        }
      });
    }
    e.preventDefault();
  })
  // 將驗證碼加到id爲captcha的元素裏，同時會有三個input的值用於表單提交
//  captchaObj.bindOn("#getphotocodeCode1");
  captchaObj.appendTo("#captcha1");
  captchaObj.onReady(function () {
    $("#wait1").hide();
  });
}

官網地址:https://docs.geetest.com/install/deploy/client/web#%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0

我說的不明白之處，可以留言問我，也可以查看官網哈。