如何使用 jQuery Validate 插件测试 Recaptcha

Question

我正在使用 validate jquery 插件和 recaptcha 作为联系表单，我想知道如何在表单提交之前检查验证码中的代码是否正确，如果没有发送错误消息，因为现在验证所有内容，但我插入了错误的代码，无论如何都要提交表单。这是我的代码 ty 提前获取任何帮助

<script type="text/javascript">
             var RecaptchaOptions = {
                lang : 'en',
                theme : 'custom',
                custom_theme_widget: 'recaptcha_widget'
             };
            </script>

            <form id="contact" method="post" action="#">

                <fieldset>
                    <label for="name_contact">NAME</label>
                    <input type="text" class="input-xlarge" id="name_contact" name="name_contact" value="" placeholder="" minlength="2">

                    <label for="email_contact">EMAIL</label>
                    <input type="email" class="input-xlarge" id="email_contact" name="email_contact" value="" placeholder="">

                    <label for="telephone">CONTACT NUMBER</label>
                    <input type="tel" class="input-xlarge" id="telephone" name="telephone" placeholder="" value="" >

                    <label for="message">MESSAGE</label>
                    <textarea id="message" class="input-xlarge" name="message" placeholder="" rows="5"></textarea>                  

                    <div id="recaptcha_widget" style="display:none">

                        <div id="recaptcha_image"></div>
                        <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

                        <span class="recaptcha_only_if_image">Enter the words above:</span>
                        <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

                        <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

                        <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
                        <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
                        <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

                        <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>

                    </div>

                    <script type="text/javascript"
                        src="http://www.google.com/recaptcha/api/challenge?k=6Lf8RN4SAAAAAKnllVnDw23UpBIuAIdTRFgN1kmX">
                    </script>

                    <noscript>
                        <iframe src="http://www.google.com/recaptcha/api/noscript?k=6Lf8RN4SAAAAAKnllVnDw23UpBIuAIdTRFgN1kmX" height="300" width="500" frameborder="0"></iframe><br>
                        <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
                        <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
                    </noscript>             

                    <button type="submit" value="" id="" name="send" class="pull-right lightblue btn-primary">SUBMIT</button>
                    </fieldset>
</form>


<script type="text/javascript">
    $(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);
            }
        });

    });
</script>

Answer 1

仅使用 JavaScript 或 jQuery 没有简单的解决方案。由于您必须使用 API 将 Re-Captcha 代码与您的 private 密钥进行比较，为了获得适当的安全性，您必须使用一些 服务器 执行此过程strong>-side 代码。

1. 用户正确填写表格，但重新验证码除外。

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

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

4. 您的 服务器 端代码、PHP、Perl 等，然后使用您的私有 API 密钥来验证输入的 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代码，显示错误信息，“输入的验证码不正确”，用户可以简单地再试一次。

---

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

将submitHandler 添加到您的.validate() 选项并使用ajax 来控制表单提交。这是您可以与验证码交互并控制表单提交的唯一方式。

您还需要修改服务器端函数以测试验证码是通过还是失败，执行相应的函数，并返回正确的ajax 消息msg。在不了解您的服务器端代码的情况下，无法说出更具体的内容。

(注意：任何纯 JavaScript/jQuery 的解决方案，无需编辑您的服务器端代码，都是不安全的。验证码可以轻松绕过，而您的私有 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 示例，说明了我如何修改作为表单邮件程序脚本的服务器端代码。您必须以类似的方式调整您的服务器端代码。

子程序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”一词，则表示代码输入错误，用户必须重新输入新的验证码。