Fatal编程技术网
  • javascript/
  • Javascript 使用Google reCAPTCHA验证表单提交

Javascript 使用Google reCAPTCHA验证表单提交

javascript html validation

Javascript 使用Google reCAPTCHA验证表单提交,javascript,html,validation,captcha,recaptcha,Javascript,Html,Validation,Captcha,Recaptcha,我已经看过这个问题了 并试图在我的代码中实现该问题的答案，以验证我的表单，以便在验证码未完成时表单不会提交 但是什么也没发生-它只是提交表单 这是我的代码： <head> <script type="text/javascript"> var onloadCallback = function() { grecaptcha.render('html_element', { 'sitekey' : 'my_site_key'

我已经看过这个问题了

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

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

这是我的代码：

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


var onloadCallback=函数（）{
render（'html\u元素'{
“站点密钥”：“我的站点密钥”
});
};


函数myFunction（）{
如果（grecaptcha.getResponse（）=“”）
警报（“您不能继续！”）；
其他的
警惕（“谢谢”）；}
有人能帮忙吗

编辑

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


var onloadCallback=函数（）{
render（'html\u元素'{
“站点密钥”：“站点密钥”
});
};
onloadCallback（）；
$（'form'）。关于（'submit'，函数（e）{
如果（grecaptcha.getResponse（）=“”）{
e、 预防默认值（）；
警报（“您不能继续！”）；
}否则{
警惕（“谢谢”）；
}
});
您需要在事件中触发
if
语句。如果使用jQuery，则可以非常轻松地执行此操作：

$('form').on('submit', function(e) {
  if(grecaptcha.getResponse() == "") {
    e.preventDefault();
    alert("You can't proceed!");
  } else {
    alert("Thank you");
  }
});
请参见此处的工作示例：

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

这是一个服务器端解决方案，除了谷歌提供的嵌入代码外，不需要jQuery/javascript

当用户在您的站点上提交包含reCaptcha的表单时，请在服务器端查找“g-reCaptcha-response”POST参数

然后将您自己的http post请求发送到此url：

作为此请求的一部分发送的POST参数包括：

机密-必需。站点和reCAPTCHA之间的共享密钥

答复-需要。reCAPTCHA提供的用户响应令牌，用于验证站点上的用户

remoteip-可选。用户的IP地址

然后你应该从谷歌那里得到类似这样的东西，你可以检查它是否成功

{ “成功”：真|假， “质询”：时间戳，//质询加载的时间戳（ISO格式yyyy-MM-dd'T'HH:MM:ssZZ） “hostname”：string，//解析reCAPTCHA的站点的主机名 “错误代码”：[…]//可选 }

如果success=true，则显示成功消息，或重定向到成功页面

如果success=false，则再次显示表单，并显示一条消息，说明他们很可能是机器人，请重试

有关更多信息，请参见此处：

,，

我根本不懂你的代码。什么事件应该触发IF语句？好吧，我忘了在函数中包装IF语句，请检查上面的编辑，这也不起作用。我已经在下面发布了一个有效的答案。这有点晚了。哈哈。但是你需要确保JS只在页面呈现后运行。这只是表单的附加部分，密钥仍将被使用。然而，这对我来说仍然不起作用，我已经将您的JSFIDLE代码添加到一个新文档中，无法理解它。你能看看我在上面的最新编辑吗？我在那里添加了我的新代码。谢谢。它与谷歌验证码2版本一起工作。已投票。发现此项有效[1][1]：