使用 google recaptcha (captcha) 进行语义 UI 表单验证答案

【问题标题】：semantic-ui form validation with google recaptcha (captcha)使用 google recaptcha (captcha) 进行语义 UI 表单验证
【发布时间】：2017-08-09 05:56:52
【问题描述】：

如果 recaptcha 字段被选中或为空，是否有任何简单的方法可以使用 google recaptcha 实现语义 UI 表单验证？

【问题讨论】：

标签： validation captcha recaptcha semantic-ui

【解决方案1】：

扩展 Arpit 的答案：

这是一个适合我的非 Angular 解决方案

您的字段验证上方的自定义验证规则：

$.fn.form.settings.rules.recaptchaValidate = function() {
  return (recaptchaVerified);
};

将此添加到您的验证中：

recaptcha: {
  identifier: 'recaptcha',
  rules: [
    {
      type: 'recaptchaValidate',
      prompt: 'Please complete reCaptcha validation.'
    }
  ]
}

和你的 HTML：

<div class="required field">
  <div class="g-recaptcha" data-sitekey="{your key here}" data-callback="correctCaptcha"></div>
  <input type="hidden" name="recaptcha" id="recaptch-validation">
</div>

[ ... then this just before closing body tag ... ]

<script type="text/javascript">
  var recaptchaVerified = false;
  var correctCaptcha = function(response) {
    recaptchaVerified = true;
  };
  var expiredCaptcha = function() {
    recaptchaVerified = false;
  };
</script>

【讨论】：

【解决方案2】：

使用以下验证进行 Google reCaptcha 验证。

脚本：

$(document).ready(function () {
    $('.ui.form').form({
        recaptcha: {
            identifier: 'g-recaptcha-response',
            rules: [
                {
                    type: 'empty',
                    prompt: 'Please complete reCaptcha validation.'
                }
            ]
        }
    },
    {
        onSuccess: function (event, fields) {
            console.log('Success:', fields);
            return false;
            //event.preventDefault();
        },
        onFailure: function (error) {
            console.log('Failure',error);
            return false;
        }
    });
});

HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Self Registration Module</title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <script src="../../Content/Scripts/jquery.min.js"></script> <!-- version 3.0.0 ->
        <script src="../../Content/semantic/semantic.min.js"></script>
        <link href="../../Content/semantic/semantic.min.css" type="text/css" rel="stylesheet" class="ui" />
        <script src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit" async defer></script>
    </head>
    <body ng-app="registrationApp">
        <div class="ui container" lang="en"
            <div class="ui attached message">
                <div class="header">
                Registation Form
                </div>
                <p>Fill out the form below to register user in rev</p>
            </div>
            <form class="ui form attached segment">
                <div class="field">
                    <div vc-recaptcha
                        key="'6Lf4ax0UAAAAADWkffMAXBsFzx2dgkMMnqvw4tIE'"
                        ng-model="RecaptchaResponse">
                    </div>
                </div>
                </div>
            </form>
        </div>
    </body>
</html>

【讨论】：

如果验证码不为空，无论答案是否正确都会返回成功