我正在一个非常大的表单上实现 reCaptcha（在 PHP 中）——如果 reCaptcha 失败，我如何保存表单数据？

Question

基本上，我有一个巨大的表格，任何人都必须重新填写它会很痛苦。我们必须实施 reCaptcha 以防止垃圾邮件机器人。

我想让它在用户输入错误验证码时，他们的表单数据不会丢失。

表单、reCaptcha 库和 reCaptcha 初始化代码位于它们自己的名为 Application.php 的文件中。此表单发布到application_confirm.php。 application_confirm 包含另一个文件，它将表单数据处理为电子邮件格式并将其发送给管理员。

Application.php 在另一个 php 页面上是必需的（具有讽刺意味的是 application.php - 这是用户访问的页面，然后通过require('content/Application.php')从前面提到的 Application.php 包含表单 html

我真的不知道我需要做什么或需要在哪里进行验证码有效性检查 - 非常感谢任何帮助！

Answer 1

我喜欢将 $_POST 数据存储到 $_SESSION 而不是 javascript 方法中。提交表单后，将 $_POST 数组推送到 $_SESSION 变量中。如果重新验证失败，请使用 $_SESSION 中的值重新加载表单。成功发布表单后，销毁会话，以便在他们返回表单时不会自动填充旧信息。

<?php
    session_start();
    $response = recaptcha_check_answer ($privatekey,
            $_SERVER["REMOTE_ADDR"],
            $_POST["recaptcha_challenge_field"],
            $_POST["recaptcha_response_field"]);
    if(isset($_POST['submit']) && !$response->is_valid)
    {
        $_SESSION['form'] = $_POST;
    }
    else
    {
        //Handle form processing
    }
?>

将输入字段的值设置为来自 $_SESSION 的值

<input type="text" name="email" value="<?= $_SESSION['form']['email'] ?>" />

Answer 2

为此滥用 JavaScript 和 localStorage...

要求

我假设你已经安装了 jQuery。如果没有，您将不得不将它包含在您的页面中，或者为基本的 JavaScript 重写一些函数。

我还假设您的用户正在运行一个相对较新的浏览器（尽管您可以使用 cookie 做很多相同的事情，解释如何设置它是另一个答案）并且没有禁用 JavaScript。

保留表单

首先，在您希望为其存储值的每个输入对象上附加一个 input-to-store 类，然后当您的用户按下提交按钮而不是立即提交您的表单时，让它首先调用一个名为 storeValues() 的函数然后提交表格：

function storeValues() {
    if(typeof(Storage) !== "undefined") {
        localStorage.setItem('preserve', true);
        $('.input-to-store').each(function() {
            localStorage.setItem($(this).attr('id'), $(this).val());
        });
    }
}

注意：localStorage不被普遍支持，所以这种方法只支持较新的浏览器（Firefox 3.5+、Chrome 4+、IE 8+）。如果不支持此方法，您可能希望使用 else 语句在 cookie 中设置这些值。

根据您的表单，您可能希望保留未存储在 .val() 访问器中的值。在这种情况下，添加另一个类并对每个类执行 .each() 函数。

重新加载表单时检索值

加载表单后，检查保留的值。如果找到，请将旧值重新加载到这些字段中：

if(typeof(Storage) !== "undefined") {
    if(localStorage.getItem('preserve') === true) {
        localStorage.setItem('preserve', false);
        $('.input-to-store').each(function() {
            if(value = localStorage.getItem($(this).attr('id')){
                $(this).val(value);
            }
        }
    }
}

完成后清除localStorage

在您的成功页面上（成功提交表单后），您需要清除 localStorage 以防止您的应用程序浪费用户硬盘上的空间：

localStorage.clear();

希望这会有所帮助，尚未测试语法，但它应该让您了解如何使用 localStorage 持久化数据并绕过可怕的丢失表单。

Answer 3

您可以使用 AJAX 通过事件 onsubmit 将值发送到表单标签到将表单值保存到会话中的页面

然后基本上说你有一个名为'FirstName'的输入

<form onsubmitup='PreserverValues();'/>

然后基本上你将所有输入更改为

<input type='text' name='FirstName' value='<?php if isset($_SESSION['FirstName']) echo $_SESSION['FirstName']; ?>'/>

Answer 4

如果 reCaptcha 失败，这是一个 recaptcha 保留表单数据的工作示例？

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

<div class="control-group">

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

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

        <div id="recaptcha_image"></div>

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

        <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA code</a></div>
    </div>

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

    <noscript>
    <iframe src="http://www.google.com/recaptcha/api/noscript?k=YOURKEY" 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>                                                 

    <?php
    require_once('captcha/recaptchalib.php');
    $publickey = "YOURKEY"; // you got this from the signup page
    echo recaptcha_get_html($publickey);
    ?>      

</div><!-- control grp captcha -->