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

【问题标题】：Google ReCaptcha Display with Image & Client Side Validation on Form Submit提交表单时显示带有图像和客户端验证的 Google ReCaptcha
【发布时间】：2017-03-03 05:25:39
【问题描述】：

我关注了

How to Validate Google reCaptcha on Form Submit

我的 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;

以上代码运行良好。

如何进行客户端验证？它没有显示带有图像选项的验证码。

我已经在下面做了

【问题讨论】：

你的 post.php 正在做客户端验证？
我真的不知道你在问什么。
嗨@nogad 在提交表单之前，我想清除客户端验证吗？使用 jQuery
好的，你在验证什么？ reCAPTCHA 与它有什么关系？
示例：假设我们在表单中有名字。因此，通过 jQuery，我们正在验证 This is required field 是否相同。因此，在点击Submit 按钮并在客户端转到服务器端之前，这将是必填字段，希望能消除您的疑虑

标签： php validation client-side recaptcha

【解决方案1】：

这是 Recaptcha 库的标准行为，第一次控制图像时不显示。

尝试多次查看或发布该页面，您会发现图像最终不会出现。

如果您想对其他附加字段进行一些客户端验证，您必须使用 jQuery 或标准库（如 bootstrap 或 Foundation），如 this 或 this。您可以在此处查看工作脚本的完整示例（灵感来自引导脚本和 HTML 5 功能）：

这个版本的脚本在整个互联网上都是一样的。没有更多的客户端验证！看看参考：codepen.io signup

例如：

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

还有here 一个示例代码笔。

【讨论】：

你有时间测试吗？