Question

我在联系表单上使用了recaptcha小部件，我想知道如何能够显示用户在同一页面上获得的错误，而不是转到另一个页面并显示错误。

Answer 1

您可以将表单提交到同一页面，并检查PHP端的发布数据。检查此示例：

<?php 
$captcha = $_POST['captcha'];
if(isset($captcha)) {
  $captcha_answer = // you need to put your correct captcha answer here
  if($captcha == $captcha_answer) {
      // captcha is correct, continue.
  }
  else {
      // captcha is not correct, display error message.
      echo '<div style="background-color:red; padding:3px;">Your captcha is not correct, please try again.</div>';
      echo '<form method="post">
                <input type="text" name="captcha" value="Type captcha here" />
            </form>'; // print the page again
  }
}
else {
?>

<form method="post">
    <input type="text" name="captcha" value="Type captcha here" />
</form>

<?php } ?>

另一个选择是使用JavaScript和AJAX。

Answer 2

Click here for demo

输入“CORRECT-CAPTCHA”并单击“检查”按钮

<强> HTML：

<input type="text" id="captcha"/>                 <!-- textbox to hold captcha text -->
<button id="check-captcha">check</button>         <!-- button to check captcha -->
<div id="error-message"></div>                    <!-- to show error message -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("#check-captcha").on("click", function() {  // On button click
            $.ajax({                                  // Call PHP script to check captcha
                url: "checkCaptcha.php",
                method: "post",
                data: {
                    "captcha": $("#captcha").val()    // Textbox holding captcha text
                }
            }).done(function(error) {                 // On PHP script finish..
                $("#error-message").text(error)       // Show correct/wrong message
            });             
        });
    });
</script>

<强> PHP：

<?php
    $captcha = $_POST['captcha'];           // Get captcha text from textbox
    if ($captcha == 'CORRECT-CAPTCHA') {    // If text == correct captcha
        echo 'correct';                     // Show message
    } else {
        echo 'error';                       // Show error
    }
?>

我假设你是AJAX的新手，所以继续解释发生了什么：

“AJAX调用”仅用于从JavaScript执行PHP脚本。

点击按钮
执行JavaScript代码
完成执行PHP脚本的AJAX调用
执行PHP脚本，并将消息返回给JavaScript
在div元素中显示消息

如何在提交的表单页面中显示重新回收错误？

2 个答案: