要求用户在提交表单之前点击谷歌的新验证码

Posted 2023-02-22

【中文标题】要求用户在提交表单之前点击谷歌的新验证码

【英文标题】：Require User to click google's new recaptcha before form submission

【发布时间】：2015-09-10 02:33:59

【问题描述】：

我在表单 (html5) 中使用了谷歌的新验证码： https://www.google.com/recaptcha

在提交表单之前，有没有办法根据需要检查和标记 recaptcha？ 我想在客户端而不是服务器端验证这一点。这样，我不必返回表单并警告用户不要为验证码输入任何内容。

我可以使用任何 javascript 来检查用户是否在 recaptcha 中输入任何内容？

【问题讨论】：

我认为你可以使用 ajax 来实现

你的双胞胎：***.com/questions/31016956/…

我同意，但我什至会做些什么来触发 ajax 调用？而且触发也需要时间。

@Dagon 这实际上有点不同，因为我希望它是在 javascript 中触发的事件（不使用 ajax）。我不是在检查验证是否正确，而是在表单提交之前检查是否已经输入。

How can I make reCAPTCHA a required field?的可能重复

【参考方案1】：

您可以检查 id g-recaptcha-response 的 textarea 字段。您可以执行以下操作：

$("form").submit(function(event) 

   var recaptcha = $("#g-recaptcha-response").val();
   if (recaptcha === "") 
      event.preventDefault();
      alert("Please check the recaptcha");
   
);

希望对你有所帮助。

【讨论】：

谢谢，这为我节省了很多工作！ BTW，括号有错误，应该是$("form").submit(function(event) 开头，);结尾。

【参考方案2】：

使用 Ankesh 和 Lammert 解决方案的一部分的普通 JavaScript 实现：

var form = document.getElementById('ctct-custom-form');
form.addEventListener("submit", function(event)
    if (grecaptcha.getResponse() === '')                             
      event.preventDefault();
      alert('Please check the recaptcha');
    
  
, false);

感谢表单提交侦听器代码：How can I listen to the form submit event in javascript?

【参考方案3】：

grecaptcha.getResponse() - 返回 Recaptcha 的响应。您可以在

等条件下进行检查

grecaptcha.getResponse(opt_widget_id) === ""

可选的小部件 ID，如果未指定，则默认为创建的第一个小部件。

参考：https://developers.google.com/recaptcha/docs/display

【参考方案4】：

我试图改进 rylanb 的回答。下面的代码查找页面中所有激活了 g-captcha 并阻止提交的表单。 注意：假设您的div.g-recaptcha 是form 的孩子

const forms = document.querySelectorAll('div.g-recaptcha');
forms.forEach(form=> 
    const formParentElement = form.parentElement;

    formParentElement.addEventListener("submit", e => 
        if (grecaptcha.getResponse() === '') 
            e.preventDefault();
            alert('Please check the recaptcha');
        
    , false)
);

【参考方案5】：

最简单的方法是更改​​按钮的类型。

    <button class="theme-btn" type="button" onclick="checkForm()" id="sign_up_button" >

现在创建一个 Java 脚本函数来更改验证时提交的类型。

<script type="text/javascript">

// 无验证码函数

    function checkForm()
      
        if(!document.getElementById("g-recaptcha-response").value)
            alert("Please Prove ! You're not a Robot");
            return false;
        else
            document.getElementById("sign_up_button").type = "submit";                
            return true;
        
    

 </script>