如何在一页上使用多个隐形验证码?

问题描述

我在登录注册表单中使用 Google 隐形验证码。但问题是这两种形式在同一页上。只有验证码对登录表单可见,但为什么它对注册表单不可见。我在登录注册表单中实现了相同的功能。帮助我对两种形式使用验证码。谢谢!

登录表单

<form action="post">
                                <input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>"
                                       value="<?= $this->security->get_csrf_hash(); ?>"/>
                                <div class="form-group">
                                    <label>Enter Email Address<span>*</span></label>
                                    <input type="text" placeholder="sample@hotmail.com" class="form-control"
                                           name="email">
                                    <span class="valid-error text-danger email-error"></span>
                                </div>
                                <div class="form-group">
                                    <label>Enter Password<span>*</span></label>
                                    <input type="Password" placeholder="Password" class="form-control" name="password1">
                                    <span class="valid-error text-danger password1-error"></span>
                                </div>
                                <div class="button-row">
                                    <button type="button" id="loginVerify" class="btn btn-primary w-100 g-recaptcha"
                                            data-sitekey="6Lex4lsaAAAAALEHzxZwHsTTUXX-fZLuGZNKowRq"
                                    >Sign in
                                    </button>
                                </div>
                                <div style="margin-top: 8px">
                                    <span class=" text-success" id="error-msg"></span>
                                </div>

                            </form>

报名表

<form>
                                <input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>"
                                       value="<?= $this->security->get_csrf_hash(); ?>">
                                <div class="form-group">
                                    <label>Enter Name<span>*</span></label>
                                    <input type="text" placeholder="Enter name" class="form-control" name="username">
                                    <span class="valid-error text-danger username-error"></span>
                                </div>
                                <div class="form-group">
                                    <label>Enter Email Address<span>*</span></label>
                                    <input type="email" placeholder="sample@hotmail.com" class="form-control"
                                           name="email1">
                                    <span class="valid-error text-danger email1-error"></span>
                                </div>
                                <div class="form-group">
                                    <label>Enter Mobile Number<span>*</span></label>
                                    <input type="tel" id="user-phone" name="phone" maxlength="11"
                                           oninput="this.value=this.value.replace(/[^0-9]/g,'');" class="form-control">
                                    <span class="valid-error text-danger phone-error"></span>
                                    <!-- <input type="Number" placeholder="+92" class="form-control" name="phone">
                                    <span class="valid-error text-danger phone-error"></span> -->
                                </div>
                                <div class="form-group">
                                    <label>Create Password<span>*</span></label>
                                    <input type="Password" placeholder="Password" class="form-control" name="password">
                                    <span class="valid-error text-danger password-error"></span>
                                </div>
                                <div class="button-row">
                                    <button type="button" id="register-verify" class="btn btn-primary w-100 g-recaptcha"
                                            data-sitekey="6Lex4lsaAAAAALEHzxZwHsTTUXX-fZLuGZNKowRq">Sign up
                                    </button>

                                </div>
                            </form>

我的JS文件

<script src='https://www.google.com/recaptcha/api.js'></script>
<script> 
$('#loginVerify').on('click',function(event){

      event.preventDefault();
      var validation = false;
      var language = '<?= $language; ?>';
      selectedInputs = ['email','password1'];
      validation = validateFields(selectedInputs,language);

      if (validation == true) {
        var form = $(this).closest('form').serializeArray();

        //console.log(form);
        $.ajax({
          type: 'post',url: '<?= base_url('home/login_process'); ?>',data: form,success: function(msg){
            console.log(msg);
            var response = JSON.parse(msg);

            if(response.error == true){
                  PNotify.removeAll();
                  new PNotify({
                      delay: 1000,text: response.msg,type: 'error',title: "Error!",styling: 'bootstrap3'
                  });

            }

            if(response.status == false){
                $('#error-msg').html(response.msg);
            }

            if(response.error == false && response.status == true){
                var rurl = '<?= isset($_GET['rurl']) ? $_GET['rurl'] : ''; ?>';
                if (rurl == '') {
                    window.location.reload(true);
                }else{
                    window.location.replace(rurl);
                }
            }
          }
        });
      }
    });

$('#register-verify').on('click',function(event){

      event.preventDefault();
      // $('#agree-error').html('');
      // if( ! $('#agree').is(':checked')){
      //   $('#agree-error').html("<?= $this->lang->line('please_indicate_you_accept_policy'); ?>");
      //   return false;
      // }

      var validation = false;
      var language = '<?= $language; ?>';
      selectedInputs = ['username','phone','email1','password'];
      validation = validateFields(selectedInputs,language);


      if (validation == true) {
        $('input[name=mobile]').val($("#user-phone").intlTelInput('getNumber'));
        var form = $(this).closest('form').serializeArray();
        //console.log(form);
        $.ajax({
          type: 'post',url: '<?= base_url('home/register_user'); ?>',beforeSend: function(){
            $("#loading").show();
            // $("#register-verify").hide();
            // $("#register-verify").attr('disabled',true);
          },complete: function(){
            $("#loading").hide();
          },success: function(msg){
            var response = JSON.parse(msg);
            console.log(response);

            if(response.error == true){
              // $('#error-msg').html('<div class="alert alert-danger alert-dismissible" id="valid-msgss"><button type="button" class="close" data-dismiss="alert" style="top: -14px;">&times;</button><strong><?= $this->lang->line("error_"); ?> </strong>'+ response.msg+' </div>');
               PNotify.removeAll();
                  new PNotify({
                      delay: 1000,title: "Try Again!",styling: 'bootstrap3'
                  });
                  // window.location.reload(true);
            }

            if(response.error == false){
               new PNotify({
                      text: response.msg,delay: 1000,type: 'success',title: "Success.",styling: 'bootstrap3'
                  });
              // $('#exampleModal').modal();
              // $('#nmbr').html(response.number);

              // // console.info($('input[name=mobile]').val());
              // console.log(response.codeGenerated);
            }
            if(response.error == false){
              $('#verificationModel').modal('show');
              $('#registerModal').modal('hide');
              $('#nmbr').html(response.number);
              $('input#verifyPhone').val(response.number);
            }
          }
        });
      }
  });
</script>

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)