Question

如果选中recaptcha字段或为空，使用google recaptcha实现语义ui表单验证的简单方法是什么？

Answer 1

使用以下验证进行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>

Answer 2

扩展Arpit的答案：

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

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

$.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>

使用google recaptcha（captcha）进行语义ui表单验证

2 个答案: