表格提交時帶有圖像和客戶端驗證的Google ReCaptcha顯示

Question

我跟着

我在index.php中有以下代碼

<!DOCTYPE HTML>
<html>
    <head>
        <script src='https://www.google.com/recaptcha/api.js'></script>
    </head>
    <body>
        <form method="post" action="post.php">
            <div class="g-recaptcha" data-sitekey="6XXXXXXXXXXXXwdsf0K8HbXXXXXXX"></div>
            <input type="submit" value="Submit" />
        </form>
    </body>
</html>

post.php中

$response = $_REQUEST['g-recaptcha-response'];
$secret = '6XXXXXXXXXXXXwdsf0K8HbJNvMw-XXXX';
$server = $_SERVER['REMOTE_ADDR'];

$response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=" . $secret . "&response=" . $response.'&remoteip='.$server);
$response = json_decode($response, true);
if ($response["success"] === true) {
    echo "Logged In Successfully";
} else {
    echo "You are a robot";
}
exit;

上面的代碼工作正常。

如何進行客戶端驗證？ 它沒有顯示帶有圖像選項的Captcha。

我已經在下面做了

Answer 1

這是Recaptcha庫的標准行為，不會顯示第一次控制圖像。

嘗試多次查看或發布頁面，您將看到圖像最終不會出現。

如果要在其他附加字段上進行某些客戶端驗證，則必須使用jQuery或標准庫，如bootstrap或foundation，如此或此類。 您可以在此處看到工作腳本的完整示例（靈感來自引導腳本和HTML 5功能）：

此版本的腳本在整個Internet上都是相同的。 沒有更多客戶端驗證！ 看看參考： codepen.io注冊

例如：

<!DOCTYPE HTML>
<html>
    <head>
      <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
      <script src='https://www.google.com/recaptcha/api.js'></script>
    </head>
    <body>
        <form class="signin-form" method="post" action="post.php">
            <!-- for example : Email and password validation (HTML 5) -->
            <label for="inputEmail" class="sr-only">Email address</label>
            <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
            <!-- Site-key for automated tests -->
            <div class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
        </form>
    </body>
</html>

這里有一個示例代碼筆。

表格提交時帶有圖像和客戶端驗證的Google ReCaptcha顯示

問題描述

1 個解決方案

解決方案1
1 2016-11-07 10:09:07

表格提交時帶有圖像和客戶端驗證的Google ReCaptcha顯示

問題描述

1 個解決方案

解決方案1 1 2016-11-07 10:09:07

解決方案1
1 2016-11-07 10:09:07