Question

这里我在jsp中有一个简单的表单。我希望reCAPTCHA和文本框都是必需的＆＃39;领域。目前，如果我只是填写文本框并按“登录”，它仍然会发送数据。如何使reCAPTCHA成为强制要求？

<!DOCTYPE html>
<html lang="en">
<head>

<script src='https://www.google.com/recaptcha/api.js'></script>

</head>

<body>

<label> Form </label>

<form action = "somefile" method = "post">

  <input = "text" name = "textbox1" required>

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

  <button type="submit" name="login">Sign In</button>

</form>

</body>
</html>

Answer 1

你绝对可以使用一些javascript来进行reCaptcha。当然，您仍然需要验证reCaptcha服务器端，但这将添加一些客户端验证。

您需要一些javascript变量来跟踪您的reCaptcha是否已经解决：
```
var captcha_passed = false;
```

告诉Google的reCaptcha成功完成后调用您的函数：

<div class="g-recaptcha" data-callback="on_captcha_filled" data-sitekey="6LdliBkTAAAAALmMlPRRm0NtKW3fz2kT2nxiWrVG"></div>

添加标签，让您的用户知道错过了。把它隐藏起来。如果他们在没有reCaptcha的情况下提交，javascript将取消隐藏。
```
<label id="lblCaptchaRequired" style="color: red" hidden>Please complete the reCaptcha</label>
```

添加要由reCaptcha调用的javascript函数：

function on_captcha_filled() {
    captcha_passed = true;
    document.getElementById("lblCaptchaRequired").hidden = true;
}

在表单中添加一个onsubmit处理程序以验证reCaptcha是否已经过去：
```
<form action = "somefile" method = "post" onsubmit = "check_captcha(event)">
```

添加onsubmit处理程序javascript：

function check_captcha(e) {
    if (captcha_passed)
        return true;
    document.getElementById("lblCaptchaRequired").hidden = false;
    e.preventDefault();
}

更新后的表格：

<form action = "somefile" method = "post" onsubmit = "check_captcha(event)">

    <input = "text" name = "textbox1" required>

    <div class="g-recaptcha" data-callback="on_captcha_filled" data-sitekey="6LdliBkTAAAAALmMlPRRm0NtKW3fz2kT2nxiWrVG"></div>
    <label id="lblCaptchaRequired" style="color: red" hidden>Please complete the reCaptcha</label>

    <button type="submit" name="login">Sign In</button>

</form>

Javascript文件

var captcha_passed = false;

/*
*   Form onsubmit handler.
*   Display captcha required label and prevent submit until captcha_passed is true
*/
function check_captcha(e) {
    if (captcha_passed)
        return true;
    document.getElementById("lblCaptchaRequired").hidden = false;
    e.preventDefault();
}

/*
*   Google reCaptcha data-callback handler.
*   Sets captcha_passed to true to allow form submission and hides captcha required label.
*/
function on_captcha_filled() {
    captcha_passed = true;
    document.getElementById("lblCaptchaRequired").hidden = true;
}

现在，当您的用户到达该页面时，最初会隐藏所需的标签，并且您的captcha_passed会初始化为false。当用户提交表单时，会调用onsubmit处理程序check_captcha来检查captcha_passed标志，并允许提交操作继续或停止它并取消隐藏标签。
当用户完成reCaptcha时，会调用on_captcha_filled函数，将captcha_passed标记设置为true并隐藏标签。

Answer 2

您好，请在下面找到用于客户端验证的详细解决方案

HTML形式：我添加了Google响应文本框并创建了三个回调事件。1）data-error-callback =“ wrongCaptcha”，2）data-callback =“ correctCaptcha”，3）data-expired-callback =“ wrongCaptcha”，

<form class="form-inline" class="text-center">
  <div class="form-group">
    <label for="email">Email:</label>
      <input type="email" id="newsletter-email" class="form-control" id="email">
  </div>
   <button type="button" class="btn btn-default" onclick="validationNewsletter()">Submit</button>
   <input type="hidden" id="google-response"/>
   <br/><br/>
  <div class="form-group">
  <div class="g-recaptcha" id="gcaptcha" data-sitekey="XXXX-XXXX" data-error-callback="wrongCaptcha" data-callback="correctCaptcha" data-expired-callback="wrongCaptcha"></div>
                </div>
</form>

JS验证

  <script>
   function validationNewsletter() {
    if($('#google-response').val()==""||$("[name=g-recaptcha-response]").val()==""){
       alert("Please check google recaptcha");
      return false;
    }
    if($('#google-response').val()!=$("[name=g-recaptcha-response]").val()){
        alert("Sorry spammer");   
        return false;
    }
   if(letsPutFormValidation){
   alert("Some form validation");   
        return false;
  }
  $('#form-id').submit();
 }

 var correctCaptcha = function (response) {
    $('#google-response').val(response);
 };

  var wrongCaptcha=function(response){
    $('#google-response').val('');
  }
</script>

ReCAPTCHA验证

2 个答案: