2015-02-23 73 views
40

我已經加入以下如何檢查js該用戶是否已選中Google recaptcha中的複選框?

<script src='https://www.google.com/recaptcha/api.js'></script> 

我已形式的端部之前添加該頭部的端部之前

<div class="g-recaptcha" data-sitekey="== xxxxxx =="></div> 

我可以看到類似https://developers.google.com/recaptcha/

然而的ReCaptcha,用戶按壓時數據不檢查複選框,數據被提交。是否有任何其他代碼需要添加以檢查用戶是否已按下複選框?希望在js?

+1

:https://developers.google.com/recaptcha/docs/verify – 2015-02-23 13:36:24

+0

yeep ..不能似乎弄清楚如何得到這個工作,雖然 – 2015-02-23 13:39:41

+0

你應該請求在你的後端服務器上。瀏覽器單獨做這件事不是很安全。 – 2015-02-23 13:40:30

回答

118

谷歌有一個回調選項,當複選框被選中。

添加到您的表單元素:

data-callback="XXX" 

例子:

<div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="== xxxxxx =="></div> 

並禁用屬性的提交按鈕。

例子:

<button id="submitBtn" disabled>Submit</button> 

然後,創建一個回調函數,寫你需要的任何代碼。

例子:

function recaptchaCallback() { 
    $('#submitBtn').removeAttr('disabled'); 
}; 
+1

完美的例子和解釋。謝謝。 – 2015-12-12 16:53:20

+0

如果頁面有兩個驗證碼,那麼這個功能會起作用嗎? – silvachathura 2017-01-18 10:23:22

+0

可能的話,您需要添加額外的功能來檢查是否在啓用提交按鈕之前調用了兩個回調。 – slinky2000 2017-01-18 14:14:58

39

您也可以撥打grecaptcha對象來檢查。 grecaptcha.getResponse();在未選中時爲空,並且在檢查時具有驗證碼。

grecaptcha.getResponse().length === 0時選中

function isCaptchaChecked() { 
    return grecaptcha && grecaptcha.getResponse().length !== 0; 
} 

if (isCaptchaChecked()) { 
    // ... 
} 
+0

但是,如何獲得grecaptcha.getResponse()? – 2017-01-13 06:46:09

+0

只要你加載谷歌的recaptcha它被加載。包的一部分 – 2017-01-14 12:32:27

+0

我試過但不工作,控制檯調試說>> >>未捕獲的ReferenceError:grecaptcha沒有定義「 – silvachathura 2017-01-18 10:29:38

0

讓瀏覽器爲你做的工作! (基於slinky2000回答)

注意:這只是爲了防止發送'意外'未檢查的recaptcha。 你仍然需要驗證在服務器端,因爲機器人不關心的ReCaptcha ...

添加一個不可見的輸入標籤只用div.g-recaptcha下面required=true屬性。

<input id='recaptcha_check_empty' required tabindex='-1', 
style='width:50px; height:0; opacity:0; pointer-events:none; 
position:absolute; 
bottom:0;'> 

括兩個寬度一divposition=relative;上述bottom:0;指向驗證碼的底部。

現在瀏覽器很好地填寫這個字段 - 指向recapcha。

現在我們需要回調:

<div class="g-recaptcha" data-callback="recaptchaCallback" ... 

function recaptchaCallback() { 
    $('#recaptcha_check_empty').val(1); 
} 
0

要檢查是否谷歌驗證碼檢查與否,你可以通過下面的代碼做到這一點:

<script> 

if(grecaptcha && grecaptcha.getResponse().length > 0) 
{ 
    //the recaptcha is checked 
    // Do what you want here 
    alert('Well, recaptcha is checked !'); 
} 
else 
{ 
    //The recaptcha is not cheched 
    //You can display an error message here 
    alert('Oops, you have to check the recaptcha !'); 
} 

</script> 
您是否已閱讀此網頁的
相關問題