带有jQuery验证插件的新验证码

php javascript jquery validation recaptcha

2022-08-30 10:09:36

我搜索了一下，不知道如何在表单提交之前验证新的reCaptcha，以及jQuery验证插件的验证功能。

我的意图：

    $.validator.addMethod('reCaptchaMethod', function (value, element, param) {
            if (grecaptcha.getResponse() == ''){
                return false;
            } else {
                // I would like also to check server side if the recaptcha response is good
                return true
            }
        }, 'You must complete the antispam verification');


    $("#form").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2
                },
                email: {
                    required: true,
                    email: true
                },
                reCaptcha: {
                    reCaptchaMethod: true   
                }
            },
            messages: {
                name: "Please fill your name",
                email: "Please use a valid email address"
            },
            submitHandler : function () {
                        $.ajax({
                            type : "POST",
                            url : "sendmail.php",
                            data : $('#form').serialize(),
                            success : function (data) {
                                $('#message').html(data);
                            }
                        });
                    }


        });

简而言之：我想使用远程方法检查服务器端用户是否在提交表单之前通过了验证码验证以及其他验证规则。

我能够在提交后检查验证码（在sendmail上.php），但是将recaptcha验证响应与其他字段验证一起进行会更好。

主要原因是更好的用户体验，一次检查所有字段。

我已经设法实现了这一点，将检查移动到提交处理程序中：

            submitHandler : function () {
                  if (grecaptcha.getResponse() == ''){
                      // if error I post a message in a div
                      $( '#reCaptchaError' ).html( '<p>Please verify youare human</p>' );

                  } else {

                        $.ajax({
                            type : "POST",
                            url : "sendmail.php",
                            data : $('#form').serialize(),
                            success : function (data) {
                                $('#message').html(data);
                            }
                        });
                    }

             }

但我不喜欢这种方法，原因有2个：

它只是检查验证码是否已填充，而不是它是否有效，并且
用户觉得这是一个两步验证。

在这个答案中，他们说可以在回调上渲染Recaptcha，以在成功的CAPTCHA响应上指定函数调用。

我试图实现它，但我无法在verify（）函数的规则中使用此解决方案。

答案 1

我知道这个问题有点过时了，但我遇到了同样的问题，只是找到了解决方案。您可以通过在 reCaptcha div 旁边添加一个隐藏字段来执行此操作，例如：

<div class="g-recaptcha" data-sitekey="{YOUR-SITE-KEY-HERE}"></div>
<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">

然后在你的javascript中：

$("#form").validate({
        ignore: ".ignore",
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            hiddenRecaptcha: {
                required: function () {
                    if (grecaptcha.getResponse() == '') {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        },(...rest of your code)

请注意，您的代码中必须包含 ，因为 jquery.validate 默认情况下会忽略隐藏字段，而不会验证它们。ignore: ".ignore"

如果要删除 reCapcha 验证时的错误消息，请向 reCapcha 元素添加数据回调

<div class="g-recaptcha" data-sitekey="{YOUR-SITE-KEY-HERE}" data-callback="recaptchaCallback"></div>

然后在您的js文件中添加

function recaptchaCallback() {
  $('#hiddenRecaptcha').valid();
};

答案 2

您还可以在提交处理程序中阻止表单提交

$("#loginForm").validate({
rules: {
    username: {
        required: true,
        minlength: 6
    },
    password: {
        required: true,
    },
},
submitHandler: function(form) {
    if (grecaptcha.getResponse()) {
        form.submit();
    } else {
        alert('Please confirm captcha to proceed')
    }
}
});