我怎样才能validation谷歌reCAPTCHA V2使用javascript / jQuery？
我在aspx中有一个简单的联系表单。 我想在提交表单之前validationreCaptcha（客户端）。 请帮忙。
示例代码：
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Test Form</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://www.google.com/recaptcha/api.js" async defer></script> <script> $("#cmdSubmit").click(function () { //need to validate the captcha }); </script> </head> <body> <form id="form1" runat="server"> <label class="clsLabe">First Name<sup>*</sup></label><br /> <input type="text" id="txtFName" name="txtFName" class="clsInput" /><br /> <div class="g-recaptcha" data-sitekey="my_key"></div> <img id="cmdSubmit" src="SubmitBtn.png" alt="Submit Form" style="cursor:pointer;" /> </form> </body> </html> 我想validationcmdSubmit点击validation码。
请帮忙。
客户端validationreCaptcha – 以下为我工作：
“grecaptcha.getResponse（）;”如果reCaptcha未在客户端validation，则返回null，否则返回非null值。
Javascript代码：
var response = grecaptcha.getResponse(); if(response.length == 0) //reCaptcha not verified else //reCaptch verified
使用此来validation简单的JavaScript的谷歌validation码。
这个代码在html身上：
<div class="g-recaptcha" id="rcaptcha" style="margin-left: 90px;" data-sitekey="my_key"></div> <span id="captcha" style="margin-left:100px;color:red" />
这段代码放在头部调用get_action（this）方法的表单button：
function get_action(form) { var v = grecaptcha.getResponse(); if(v.length == 0) { document.getElementById('captcha').innerHTML="You can't leave Captcha Code empty"; return false; } else { document.getElementById('captcha').innerHTML="Captcha completed"; return true; } }
如果您在callback中呈现了Recaptcha
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
使用一个空的DIV作为占位符
<div id='html_element'></div>
那么你可以指定一个成功的CAPTCHA响应的可选函数调用
var onloadCallback = function() { grecaptcha.render('html_element', { 'sitekey' : 'your_site_key', 'callback' : correctCaptcha }); };
然后，将会将recaptcha响应发送到“correctCaptcha”function。
var correctCaptcha = function(response) { alert(response); };
所有这一切都来自Google API的说明：
Google Recaptcha v2 API说明
我有点不确定你为什么要这样做。 通常情况下，您将发送g-recaptcha-response字段和您的私钥以安全地validation服务器端。 除非你想在recaptcha成功之前禁用提交button，否则上述情况应该起作用。
希望这可以帮助。
保罗
简单的保罗的答案是：
资源：
<script src="https://www.google.com/recaptcha/api.js"></script>
HTML：
<div class="g-recaptcha" data-sitekey="YOUR_KEY" data-callback="correctCaptcha"></div>
JS：
var correctCaptcha = function(response) { alert(response); };
我使用HarveyEV的解决scheme，但误解了它，并使用jQueryvalidation，而不是Bootstrapvalidation程序。
<script src="ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script> <script> $("#contactForm").validate({ submitHandler: function (form) { var response = grecaptcha.getResponse(); //recaptcha failed validation if (response.length == 0) { $('#recaptcha-error').show(); return false; } //recaptcha passed validation else { $('#recaptcha-error').hide(); return true; } } }); </script>
您可以使用以下代码呈现您的recaptcha
<div id="recapchaWidget" class="g-recaptcha"></div> <script type="text/javascript"> var widId = ""; var onloadCallback = function () { widId = grecaptcha.render('recapchaWidget', { 'sitekey':'Your Site Key' }); }; </script> <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
然后，您可以通过使用“IsRecapchaValid（）”方法validation您的recaptcha，如下所示。
<script type="text/javascript"> function IsRecapchaValid() { var res = grecaptcha.getResponse(widId); if (res == "" || res == undefined || res.length == 0) { return false; } return true; } </script>
我在Bootstrapvalidation器中使用了Palek的解决scheme，它工作。 我会添加一个评论给他，但我没有代表;）。 简化版本：
$('#form').validator().on('submit', function (e) { var response = grecaptcha.getResponse(); //recaptcha failed validation if(response.length == 0) { e.preventDefault(); $('#recaptcha-error').show(); } //recaptcha passed validation else { $('#recaptcha-error').hide(); } if (e.isDefaultPrevented()) { return false; } else { return true; } });
我认为他们都是伟大的，但我有麻烦，实际上让他们与JavaScript和C＃工作。 这是我做的。 希望它可以帮助别人。
//put this at the top of the page <script src="https://www.google.com/recaptcha/api.js"></script> //put this under the script tag <script> var isCaptchaValid = false; function doCaptchaValidate(source, args) { args.IsValid = isCaptchaValid; } var verifyCallback = function (response) { isCaptchaValid = true; }; </script> //retrieved from google and added callback <div class="g-recaptcha" data-sitekey="sitekey" data-callback="verifyCallback"> //created a custom validator and added error message and ClientValidationFucntion <asp:CustomValidator runat="server" ID="CustomValidator1" ValidationGroup="Initial" ErrorMessage="Captcha Required" ClientValidationFunction="doCaptchaValidate"/>
