使用 Google reCAPTCHA 验证表单提交

Question

使用 Google reCAPTCHA 验证表单提交

smi*_*ird 2 html javascript validation captcha recaptcha

我看过这个问题

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

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

这是我的代码：

 <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>

Run Code Online (Sandbox Code Playgroud)

任何人都可以帮忙吗？

编辑

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Chu*_*utt 6

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

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

Run Code Online (Sandbox Code Playgroud)

请参阅此处的工作示例：JSFiddle

在 JavaScript 中执行此操作的问题在于，如果用户愿意，可以轻松伪造结果。如果您真的想检查用户是否是机器人，您仍然应该使用您的 reCAPTCHA 密钥在服务器端比较用户（通过 POST）提交的结果。

归档时间：	9 年，11 月前
查看次数：	23883 次
最近记录：	4 年，7 月前