使用Google reCAPTCHA验证表单提交

Validating submit of form with Google reCAPTCHA

本文关键字：表单提交 验证 reCAPTCHA Google 使用      更新时间：2023-09-26

我看过这个问题

如何在表单提交上验证Google reCaptcha

并试图将这个问题的答案实现到我的代码中，以验证我的表单，这样，如果captcha还没有完成，它就不会提交。

然而，什么也没发生——它只是提交了表格。

这是我的代码：

 <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）提交的结果。

相关文章：