php - 将 ReCaptcha 与 jQuery Validate 结合使用，给出正确的响应，但给出错误

Question

我正在使用 jQuery 验证我的网站的注册表单，底部有一个 reCaptcha。这是检查表单错误的脚本(仅编辑相关部分):

$(document).ready(function() { 
  jQuery.validator.addMethod("checkCaptcha", function() {
    var phpquery = $.ajax({url:"verify.php",
      type: "POST",
      async: false,
      data:{recaptcha_challenge_field:Recaptcha.get_challenge(),recaptcha_response_field:Recaptcha.get_response()},
      success:function(resp) {
        if (resp == 'false') {
          console.dir(resp);
          return false;
        } else {
          console.dir(resp);
          return true;
        }
      }
    });
  },"");

  $('#regForm').validate({
    rules:{
      recaptcha_response_field:{required:true,checkCaptcha:true}
    },
    messages:{
      recaptcha_response_field:{checkCaptcha:"Your Captcha response was incorrect. Please try again."}
    }
  });
});

当我输入正确的 reCaptcha 响应并单击提交或跳出响应文本字段时，会发生什么情况，它最初会显示 true在控制台中，然后立即抛出 false并阻止我提交表单。

还会发生的情况是，当输入错误的 reCaptcha 响应时，它会抛出 false就像它应该的那样，但是对于我输入的每个字母，它都会将其提交给 verify.php并返回false 。当我最终输入正确的 reCaptcha 时，它无法识别它，并且仍然返回 false 。

重新加载 reCaptcha 也会抛出 false ，即使输入了正确的响应。

我知道verify.php工作正常，因为当 <form>会有action="verify.php,"一切都会完美运行(即，告诉您是否输入了正确的 reCaptcha，无论您尝试了多少次)。

我错过了什么吗？有没有更简单、可靠的方法来做到这一点？

Answer 1

在.validate()内使用onkeyup: false选项。

否则，每次您输入一个字母时，它都会运行您的 checkCaptcha 方法并向服务器发送不完整的验证码。我相信一旦发送了错误的验证码，该验证码就会过期，并且您无法再次发送相同的代码。

无论哪种方式，我认为最好不要在字段完成之前向服务器发送代码。

$('#regForm').validate({
    onkeyup: false,
    rules:{
        recaptcha_response_field: {
            required: true,
            checkCaptcha: true
        }
    },
    messages:{
        recaptcha_response_field: {
            checkCaptcha: "Your Captcha response was incorrect. Please try again."
        }
    }
});

此外，如果验证码失败，您需要触发刷新才能获取新代码。

Recaptcha.reload();

在您的成功回调中，也许......

success:function(resp) {
    if (resp == 'false') {
        console.dir(resp);
        Recaptcha.reload();  // get a new captcha code on failure
        return false;
    } else {
        console.dir(resp);
        return true;
    }
}