新的reCaptcha与jQuery验证插件

13 浏览
0 Comments

新的reCaptcha与jQuery验证插件

我搜索了一下，但无法弄清楚如何在表单提交之前，与jQuery验证插件的验证函数一起，验证新的reCaptcha。

我的意图：

    $.validator.addMethod('reCaptchaMethod', function (value, element, param) {
            if (grecaptcha.getResponse() == ''){
                return false;
            } else {
                // 我还想在服务器端检查recaptcha的响应是否正确
                return true
            }
        }, '您必须完成反垃圾验证');
    $("#form").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2
                },
                email: {
                    required: true,
                    email: true
                },
                reCaptcha: {
                    reCaptchaMethod: true   
                }
            },
            messages: {
                name: "请填写您的姓名",
                email: "请使用有效的电子邮件地址"
            },
            submitHandler : function () {
                        $.ajax({
                            type : "POST",
                            url : "sendmail.php",
                            data : $('#form').serialize(),
                            success : function (data) {
                                $('#message').html(data);
                            }
                        });
                    }
        });

简而言之：我希望在提交表单之前，使用remote方法在服务器端检查用户是否通过了recaptcha验证，并与其他验证规则一起检查。

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

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

我设法实现了这一点，将检查移动到submitHandler中：

            submitHandler : function () {
                  if (grecaptcha.getResponse() == ''){
                      // 如果有错误，我在一个div中发布一条消息
                      $( '#reCaptchaError' ).html( '请验证您是否为人类' );
                  } else {
                        $.ajax({
                            type : "POST",
                            url : "sendmail.php",
                            data : $('#form').serialize(),
                            success : function (data) {
                                $('#message').html(data);
                            }
                        });
                    }
             }

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

  1. 它只检查recaptcha是否已填写，而不是是否有效，而
  2. 用户感觉就像是2个步骤的验证。

在这个答案中，他们说可以通过在回调中呈现Recaptcha来指定在成功的验证码响应上调用的函数。

我尝试实现了这个，但我无法在validate（）函数的规则中使用这个解决方案。

0