如何使用jQuery Validate插件测试Recaptcha

我正在使用validationjquery插件和recaptcha作为联系表单，我想知道如何在表单获取之前检查validation码中的代码是否正确如果没有发送错误消息，因为现在validation一切但我插入了错误的代码无论如何都要提交表单。 这是我的代码ty提前为anyhelp

 var RecaptchaOptions = { lang : 'en', theme : 'custom', custom_theme_widget: 'recaptcha_widget' };  
 
 NAME  EMAIL  CONTACT NUMBER  MESSAGE  
 
 
Incorrect please try again
 Enter the words above: Enter the numbers you hear:  
Get another CAPTCHA
 
Get an audio CAPTCHA
 
Get an image CAPTCHA
 
Help
 
    
    SUBMIT 
 
  $(document).ready(function () { $("#contact").validate({ rules: { "name_contact": { required: true, minlength: 3 }, "email_contact":{ required: true }, "message":{ required:true }, "recaptcha_response_field":{ required:true } }, messages: { "name_contact": { required: "Please, enter a name" }, "email_contact":{ required: "Enter a valid email" }, "message":{ required: "Please provide a comment" }, "recaptcha_response_field":{ required: "Captcha is required" } }, errorPlacement: function(error, element) { error.insertBefore(element); } }); });  

Answer 1

没有简单的解决方案只使用JavaScript或jQuery。 由于您必须使用API​​和私钥来比较Re-Captcha代码，为了获得适当的安全性，您必须使用一些服务器端代码执行此过程。

1. 除Re-Captcha代码外，用户可以正确填写表单。

2. 如果Re-Captcha代码为空，则jQuery Validate中的正常required规则会触发“丢失的Captcha”消息。 用户可以再试一次。

3. 输入的Re-Captcha代码（正确或不正确），表单通过submitHandler回调函数中的jQuery ajax提交给服务器端代码。

4. 您的服务器端代码，PHP，Perl等等，然后使用您的私有API密钥来validation输入的Re-Captcha代码与API期望的Re-Captcha代码。

5. 如果Re-Captcha代码正确，您的服务器端代码将继续正常运行，并向您的jQuery ajax success回调函数返回“成功”文本响应。

6. 如果Re-Captcha代码不正确 ，您的服务器端代码将只返回对您的jQuery ajax success回调函数的“错误”文本响应，并且服务器端代码将不执行任何其他操作。

7. 在您的jQuery ajax success回调函数中，读取从服务器端代码返回的消息文本。

8. 如果返回的消息表明成功，那么您的表单已经成功提交，您可以重定向，清除表单，动画，打印消息，什么也不做，等等。

9. 如果返回的消息指示失败，则通过JavaScript生成新的Re-Captcha代码，显示错误消息， “输入的Captcha不正确” ，用户可以再次尝试。

---

这就是我的做法……你需要做的事情非常类似于以下内容。

将submitHandler添加到submitHandler .validate()选项并使用ajax控制表单提交。 这是您与Captcha和控制表单提交进行交互的唯一方式。

您还需要修改服务器端函数以测试validation码是通过还是失败，执行相应的function，并返回正确的ajax消息， msg 。 如果不了解服务器端代码，就不可能说出更具体的内容。

（ 注意：任何纯JavaScript / jQuery的解决方案，如果不编辑服务器端代码，都是不安全的。可以轻松绕过Captcha，并向公众公开您的私有API密钥。）

 $(document).ready(function() { $("#contact").validate({ // your other options and rules, submitHandler: function (form) { $.ajax({ type: 'POST', data: $('form').serialize(), url: 'formMail.pl', // <-- whatever your server-side script, mine is a perl form mailer success: function (msg) { if (msg.indexOf('captcha') != -1) { Recaptcha.reload(); // reloads a new code $('#recaptcha_response_field').before(msg); // error message } else { // anything else to do upon success, animations, etc. // form was already submitted as per ajax } } }); return false; // blocks normal form submit } }); }); 

以下仅是我修改服务器端代码的PERL示例，该代码是Form Mailer脚本。 您必须以类似的方式调整服务器端代码。

脚本首次运行时会调用子例程check_captcha 。

 sub check_captcha { my $ua = LWP::UserAgent->new(); my $result=$ua->post( 'http://www.google.com/recaptcha/api/verify', { privatekey => 'xxxxxxxxxxxxx', # insert your private key here remoteip => $ENV{'REMOTE_ADDR'}, challenge => $Form{'recaptcha_challenge_field'}, response => $Form{'recaptcha_response_field'} } ); if ( $result->is_success && $result->content =~ /^true/) { return; # OK - continue as normal with Form Mailer } else { # error, Form Mailer will not continue &error('captcha_failed'); # failed Captcha code, call error subroutine to print an error message (msg) containing the word "captcha" } } 

请记住，此服务器端代码必须返回一条消息，您的jQuery将在jQuery ajax success回调中选择上面的msg 。 在我的示例中，如果消息包含单词“captcha”，则表示输入的代码错误，用户必须重新输入新的Captcha代码。