使用 Google reCAPTCHA 验证表单提交

Validating submit of form with Google reCAPTCHA

我看过这个问题

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 语句。如果您使用 jQuery，您可以很容易地做到这一点：

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

在此处查看工作示例：JSFiddle

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