php 要求用户在提交表单之前单击google的新recaptcha

gtlvzcf8  于 2023-02-03  发布在  PHP
关注(0)|答案(6)|浏览(132)

我正在使用谷歌的新recaptcha内我的形式(HTML5):https://www.google.com/recaptcha
有没有办法在表单提交之前检查并标记captcha为必需的?我想在客户端而不是服务器端验证它。这样,我就不必返回表单并警告用户不要为captcha输入任何内容。
我可以用任何javascript来检查用户是否在captcha中输入了任何内容?

mzillmmw

mzillmmw1#

您可以检查ID为g-recaptcha-response的文本区域字段。您可以执行以下操作:

$('form').submit(function(event) {
    if ( $('#g-recaptcha-response').val() === '' ) {
        event.preventDefault();
        alert('Please check the recaptcha');
    }
});

希望这对你有帮助。

zmeyuzjn

zmeyuzjn2#

使用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?

x6492ojm

x6492ojm3#

grecaptcha.getResponse()-返回Recaptcha的响应。您可以在以下条件中检查此响应
grecaptcha.getResponse(opt_widget_id) === ""
可选小工具ID,如果未指定,则默认为创建的第一个小工具。
参考:https://developers.google.com/recaptcha/docs/display

zbq4xfa0

zbq4xfa04#

我试图改进rylanb的回答,下面的代码找到了页面中所有激活了g-captcha并阻止提交的表单。它假定您的div.g-recaptchaform的子级

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)
});
3pmvbmvn

3pmvbmvn5#

2022年工作方案

就我个人而言,我无法让上面的任何一个解决方案与我的验证码一起工作,所以我想我会分享我目前的工作解决方案给那些面临同样问题的人。
我在.js中的注解应该会彻底解释解决方案。
JavaScript语言

// By default do not allow form submission.
var allow_submit = false

function captcha_filled () {
    /*
     * This is called when Google get's the recaptcha response and approves it.
     * Setting allow_submit = true will let the form POST as normal.
     * */

    allow_submit = true
}

function captcha_expired () {
    /*
     * This is called when Google determines too much time has passed and expires the approval.
     * Setting allow_submit = false will prevent the form from being submitted.
     * */

    allow_submit = false
}

function check_captcha_filled (e) {
    console.log('verify-captcha')
    /*
     * This will be called when the form is submitted.
     * If Google determines the captcha is OK, it will have
     * called captcha_filled which sets allow_submit = true
     * If the captcha has not been filled out, allow_submit
     * will still be false.
     * We check allow_submit and prevent the form from being submitted
     * if the value of allow_submit is false.
     * */

    // If captcha_filled has not been called, allow_submit will be false.
    // In this case, we want to prevent the form from being submitted.
    if (!allow_submit) {
        // This call prevents the form submission.
        // e.preventDefault()

        // This alert is temporary - you should replace it with whatever you want
        // to do if the captcha has not been filled out.
        alert('ERROR: Please verify you are human by filling out the captcha')

        return false
    }
    captcha_expired()
    return true
}

超文本标记语言

<form action="post" onsubmit="return check_captcha_filled()">
<!-- form items -->
<div class="g-recaptcha"
   data-callback="captcha_filled"
   data-expired-callback="captcha_expired"
   data-sitekey="your site key">
</div>
</form>
xoshrz7s

xoshrz7s6#

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

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

相关问题