如何使用jQuery Validate插件测试Recaptcha

Question

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

<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代码,因此为了获得适当的安全性,您必须使用某些服务器端代码执行此过程.

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

2. 如果Re-Captcha代码为空,则requiredjQuery Validate中的常规规则会触发"丢失的Captcha"消息.用户可以再试一次.

3. 输入的Re-Captcha代码(正确或不正确),表单在回调函数中通过jQuery 提交给服务器端代码.ajaxsubmitHandler

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代码,显示错误消息,"输入的Captcha不正确",用户可以再次尝试.

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

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

您还需要修改服务器端函数以测试验证码是通过还是失败,执行相应的功能,并返回正确的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示例,该代码是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代码.