HTML 如何将reCAPTCHA设置为必填字段

在本文中，我们将介绍如何将reCAPTCHA设置为必填字段。

阅读更多：HTML 教程

什么是reCAPTCHA？

reCAPTCHA是一种通过验证码来验证用户是否为机器人的工具。它由Google开发，用于防止垃圾邮件和滥用。

如何使用reCAPTCHA？

要使用reCAPTCHA，您需要在网站中包含Google提供的reCAPTCHA代码。首先，您需要在Google reCAPTCHA网站上注册您的网站，并获取您的reCAPTCHA Site Key和Secret Key。然后，将以下HTML代码嵌入您的网站表单中：

<form action="form-process.php" method="POST">
  <!-- 其他表单字段 -->

  <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>

  <button type="submit">提交</button>
</form>

请确保将YOUR_SITE_KEY替换为您自己的reCAPTCHA Site Key。

将reCAPTCHA设置为必填字段

默认情况下，reCAPTCHA不是表单的必填字段。要将其设置为必填字段，您需要在表单验证时检查reCAPTCHA是否被填写。以下是一个使用JavaScript进行表单验证，确认reCAPTCHA是否被填写的示例：

<form onsubmit="return validateForm();" action="form-process.php" method="POST">
  <!-- 其他表单字段 -->

  <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>

  <button type="submit">提交</button>
</form>

<script>
  function validateForm() {
    var captchaResponse = grecaptcha.getResponse();

    if (captchaResponse.length == 0) {
      alert("请完成reCAPTCHA验证。");
      return false;
    }

    // 如果reCAPTCHA验证通过，继续提交表单
    return true;
  }
</script>

在上面的示例中，我们使用grecaptcha.getResponse()方法来获取用户对reCAPTCHA的响应。如果该响应的长度为0，则表示用户未完成reCAPTCHA验证，我们显示一个提示并阻止表单提交。

确保服务器验证reCAPTCHA

尽管我们在客户端进行了验证，但为了安全起见，我们还需要在服务器端验证reCAPTCHA是否有效。为此，我们需要发送HTTP请求到reCAPTCHA验证API，并验证响应是否指示用户已通过reCAPTCHA验证。

以下是使用PHP进行服务器验证的示例代码：

<?php
   $secretKey = "YOUR_SECRET_KEY";$ captchaResponse =  $_POST['g-recaptcha-response'];$ remoteIp =  $_SERVER['REMOTE_ADDR'];$ url = 'https://www.google.com/recaptcha/api/siteverify';
   $data = array( 'secret' =>$ secretKey,
    'response' =>  $captchaResponse, 'remoteip' =>$ remoteIp
  );

   $options = array( 'http' => array( 'header' => "Content-type: application/x-www-form-urlencoded\r\n", 'method' => 'POST', 'content' => http_build_query($ data)
    )
  );

   $context = stream_context_create($ options);
   $result = file_get_contents($ url, false,  $context);$ response = json_decode( $result, true); if ($ response['success'] == false) {
    die("reCAPTCHA验证失败！");
  }

  // 进行其他的表单处理
?>

请确保将YOUR_SECRET_KEY替换为您自己的reCAPTCHA Secret Key。