javascript - ReCAPTCHA 验证

这里我有一个简单的jsp表单。我希望 reCAPTCHA 和文本框都是“必填”字段。目前，如果我只是填写文本框并按“登录”，它仍然会发送数据。如何使 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>

最佳答案

您绝对可以使用一些 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 并隐藏标签。

关于javascript - ReCAPTCHA 验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36123980/

javascript - ReCAPTCHA 验证

上一篇：javascript - 使用 javascript 将帖子发送到 api 时出现跨源请求被阻止错误

下一篇：javascript - Typescript Angular2 - 提示缺少类型