时间戳

首页 > 解决方案 > 如何在同一页面中添加多个验证码并检查两个复选框的填充

javascript - 如何在同一页面中添加多个验证码并检查两个复选框的填充

问题描述

我在一个页面上有两个表单，其中一个是登录表单，另一个是注册表单（两个选项卡），我想检查验证码，但是当我从注册表单中单击检查验证码时，我不能登录。

登录表格：

HTML：

<div id="loginUserTab" class="tab-pane fade">
  <form>
    <div class="form-group login-width-100">
      <label for="id_number" class="m-rtl-label"><span class="requiredMark">*</span>passport number:</label>
      <input type="text" class="form-control" id="pNo" name="pNo" data-validetta="required,minLength[10],maxLength[10]" lang="fa" style="text-align: left;">
    </div>
    <div class="form-group login-width-100">
      <label for="mNumber" class="m-rtl-label"><span class="requiredMark"></span>  telephone :</label>
      <input type="text" class="form-control" id="tNumber" name="tNumber" data-validetta="required,minLength[11],maxLength[11]" lang="fa" style="text-align: left;">
    </div>
    <div class="form-group" style="float:right;padding-right: 20px;">
      <div class="g-recaptcha" data-sitekey="...."></div>
    </div>
    <div class="form-group login-width-100">
      <button type="submit" class="btn btn-primary colorGreenBTN">login</button>
    </div>
  </form>
</div>

JS：

var v = grecaptcha.getResponse();
if (v.length == 0) {
  alert("fill the form");
  return;
} else if (!$("#Terms").prop("checked")) {
  alert("check the rules");
}

标签： javascriptjquerycaptcha

解决方案

验证尽可能多的 g-captcha validate 的最简单方法

希望您在标签api.js之前包含</head>如下

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit"></script>

您的 HTML 代码如下所示

<div class="g-recaptcha-contact" data-sitekey="Your Site Key" id="RecaptchaField2"></div>
<input type="hidden" class="hiddenRecaptcha" name="ct_hiddenRecaptcha" id="ct_hiddenRecaptcha">

<div class="g-recaptcha-quote" data-sitekey="Your Site Key" id="RecaptchaField1"></div>
<input type="hidden" class="hiddenRecaptcha" name="qt_hiddenRecaptcha" id="qt_hiddenRecaptcha">

在带有标签的页脚中添加此代码后

var CaptchaCallback = function() {
    var widgetId1;
    var widgetId2;
    widgetId1 = grecaptcha.render('RecaptchaField1', {'sitekey' : 'Your Site Key', 'callback' : correctCaptcha_quote});
    widgetId2 = grecaptcha.render('RecaptchaField2', {'sitekey' : 'Your Site Key', 'callback' : correctCaptcha_contact});
};
var correctCaptcha_quote = function(response) {
    $("#qt_hiddenRecaptcha").val(response);
};
var correctCaptcha_contact = function(response) {
    $("#ct_hiddenRecaptcha").val(response);
};

开发人员的最后一个简单步骤如下添加 Jquery Validation

$("#form_id").validate({
    ignore: [],
    rules: {
        ct_hiddenRecaptcha: { required: true, },
        qt_hiddenRecaptcha: { required: true, },
    },
});

如果您对两种表单都有相同的类，则可以使用它在上面进行验证。

推荐阅读