表格提交时带有图像和客户端验证的Google ReCaptcha显示

Question

I have followed 我跟着

How to Validate Google reCaptcha on Form Submit 如何在表单提交上验证Google reCaptcha

I have below code in my index.php 我在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 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;

Above code is working fine. 上面的代码工作正常。

How to do client side validation? 如何进行客户端验证？ It's not showing Captcha with Images Option. 它没有显示带有图像选项的Captcha。

I already done below 我已经在下面做了

Answer 1

This is the standard behavior of the Recaptcha library does not display the first time the control over the images. 这是Recaptcha库的标准行为，不会显示第一次控制图像。

Try to view or post the page many times and you will see that the images not eventually appear. 尝试多次查看或发布页面，您将看到图像最终不会出现。

If you want to do some client side validation on other additionnals fields, you must use jQuery or standar library like bootstrap or foundation, like this or this . 如果要在其他附加字段上进行某些客户端验证，则必须使用jQuery或标准库，如bootstrap或foundation，如此或此类。 You can see of full example of a working script here (inspired from bootstrap script and HTML 5 capabilities) : 您可以在此处看到工作脚本的完整示例（灵感来自引导脚本和HTML 5功能）：

This version of the script is the same all over Internet. 此版本的脚本在整个Internet上都是相同的。 No more client side validation for this ! 没有更多客户端验证！ Have a look to a reference : codepen.io signup 看看参考： codepen.io注册

For example : 例如：

<!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>

And here a sample code pen. 这里有一个示例代码笔。

表格提交时带有图像和客户端验证的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