3

我正在使用 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>
4

1 回答 1

6

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

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

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

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

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

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

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

  7. 在您的 jQueryajax 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 示例，说明了我如何修改作为 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"
       }
}

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

于 2013-03-14T16:03:55.827 回答