reCaptcha / 表单验证答案

【问题标题】：reCaptcha / Form ValidationreCaptcha / 表单验证
【发布时间】：2015-12-19 16:22:28
【问题描述】：

您好，我想将 reCaptcha(2) 导入我的注册表单。我已经导入了，但他们不验证它。在提交点击时，跳过空的 reCaptcha 并忽略它。有人可以发布完整的 HTML 和 JAVA/SCRIPT 代码（不使用 使用 php）。我找不到正确的代码。我想要一个完整的 html/脚本代码。 :x

我试过这个，但我需要一个<script> 代码来验证它。我搜索了一个代码，尝试了一些脚本，但它无法验证<form>。

<html>
<head>
<title>TEST</title>
 <script src='https://www.google.com/recaptcha/api.js?hl=en'></script>
</head>
<body>
<form method="POST" action="register.html">
<input type="text" name="name" required>
<br>
<input type="email" name="email" required>
<br>
<input type="password" name="password" required>
<br>
 <center><div class="g-recaptcha" data-theme="dark" data-sitekey="MY_SITE_KEY"></div></center><br>
<br>
<input type="submit" value="submit">
</body>
</html>

谢谢。

【问题讨论】：

您在服务器端验证方面需要帮助吗？
是的，我想是的，或者？

标签： javascript php jquery validation recaptcha

【解决方案1】：

由于您必须进行服务器端验证码验证，因此表单中的 action 部分应该是 register.php，而不是 register.html。你的 HTML 代码应该是这样的：

<form method="POST" action="register.php">
    <input type="text" name="name" required><br />
    <input type="email" name="email" required><br />
    <input type="password" name="password" required><br />
    <center>
        <div class="g-recaptcha" data-theme="dark" data-sitekey="YOUR_SITE_KEY"></div>
    </center><br />
    <input type="submit" name="submit" value="submit">
</form>

这就是您可以在 register.php 文件中验证输入验证码的方法，

<?php

    if(isset($_POST['submit'])){

        //your site secret key
        $secret = 'XXXXXXX_Secret-key_XXXXXXX';

        if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
            //get verified response data
            $param = "https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$_POST['g-recaptcha-response'];
            $verifyResponse = file_get_contents($param);
            $responseData = json_decode($verifyResponse);

            if($responseData->success){
                // success
                echo "success";
            }else{
                // failure
            }

        }

    }

?>

以下是参考：

已编辑：

根据您的评论，

2x 边框在 .例如然后我得到一个错误，它添加了一个样式（左边框：1px 纯红色；边框右：1px 纯红色；）或者它添加了一个类（recaptcha-error）。成功时仅显示没有边框的 reCaptcha 绿色标记。

这是解决方案，

你的样式表应该是这样的：

<style>
    .error {
        border:5px solid red;
    }
    .success{
        border:5px solid blue;
    }
</style>

您的 HTML 将保持原样，您的 jQuery 应该是这样的：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('[name="submit"]').click(function(e){
            var recaptchaResponse = grecaptcha.getResponse();

            if(recaptchaResponse == ""){
                $(".g-recaptcha").addClass("error");
            }else{
                $(".g-recaptcha").addClass("success");
            }

        });
    }); 
</script>

【讨论】：

谢谢，但是我可以不用 php 吗？我正在使用应用程序，无法在 register.php 上添加代码
@o'Bass 这不可能。由于您必须执行服务器端验证，因此您必须使用显式表单提交或 ajax 来验证验证码。
噢，谢谢！还有一件事：我搜索了一个代码并找到了一个（stackoverflow.com/a/27480486/5696491），你能告诉我，如果它有错误，我如何添加红色边框而不显示警报消息？我是 javascript 新手，找不到正确的代码。谢谢。
@o'Bass 验证码周围的红色边框还是表单周围的红色边框？
啊，2x 边框在
一侧。例如然后我得到一个错误，它添加了一个样式（左边框：1px 纯红色；边框右：1px 纯红色；）或者它添加了一个类（recaptcha-error）。成功时仅显示没有边框的 reCaptcha 绿色标记。