使用 Google reCAPTCHA 验证表单提交答案

【问题标题】：Validating submit of form with Google reCAPTCHA使用 Google reCAPTCHA 验证表单提交
【发布时间】：2016-03-12 00:54:45
【问题描述】：

我看过这个问题

How to Validate Google reCaptcha on Form Submit

并尝试将该问题的答案实现到我的代码中以验证我的表单，以便在验证码尚未完成时不会提交。

但是什么也没发生 - 它只是提交表单。

这是我的代码：

 <head>

        <script type="text/javascript">
  var onloadCallback = function() {
    grecaptcha.render('html_element', {
      'sitekey' : 'my_site_key'
    });
  };
</script>

 </head>

          <div id="html_element"></div>
      <br>

      <input type="submit" value="Submit" onclick="myFunction">

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
function myFunction() {    
if(grecaptcha.getResponse() == "")
    alert("You can't proceed!");
else
    alert("Thank you");}
 </script>

谁能帮忙？

编辑

<html>
<head>
        <script type="text/javascript">

var onloadCallback = function() {
    grecaptcha.render('html_element', {
    'sitekey' : 'site-key'
  });
};
onloadCallback();

$('form').on('submit', function(e) {
  if(grecaptcha.getResponse() == "") {
    e.preventDefault();
    alert("You can't proceed!");
  } else {
    alert("Thank you");
  }
});
           </script>
</head>
<body>
        <form action="?" method="POST">
      <div id="html_element"></div>
      <br>
      <input type="submit" value="Submit">
    </form>


<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>

 </script>
    </body>

【问题讨论】：

我根本不遵循您的代码。什么事件应该触发 IF 语句？
好吧，我忘了把 IF 语句包装在一个函数中，检查我上面的编辑
那也行不通。我在下面发布了一个有效的答案。
这有点晚了。哈哈。但是您需要确保 JS 仅在页面呈现后运行。 learn.jquery.com/using-jquery-core/document-ready

标签： javascript html validation captcha recaptcha

【解决方案1】：

您需要在事件中触发您的if 语句。如果你使用 jQuery，你可以很容易地做到这一点：

$('form').on('submit', function(e) {
  if(grecaptcha.getResponse() == "") {
    e.preventDefault();
    alert("You can't proceed!");
  } else {
    alert("Thank you");
  }
});

在此处查看工作示例：JSFiddle

在 JavaScript 中这样做的问题在于，如果用户愿意，他们很容易伪造结果。如果您真的想检查用户是否是机器人，您仍然应该使用您的 reCAPTCHA 密钥在服务器端比较用户（通过 POST）提交的结果。

【讨论】：

这只是表单的附加部分，密钥仍将被使用。但是，这仍然不适合我，我已将您的 JSFiddle 代码添加到新文档中，但无法理解。你能看看我在上面添加新代码的最新编辑吗？
谢谢。它适用于谷歌验证码 2 版本。已投票。