Google验证码DOM选择器不起作用-document.querySelector('#g-captcha-response')。value

时间:2019-01-28 20:02:14

标签: javascript html vue.js recaptcha

在引用Google Recaptcha的选择器时,来自g-captcha-response的值始终为空。它以前一直在工作,但是突然间停止了。我目前正在使用vue,并且验证码和注册函数放置在组件内部。我绝对没有对负责验证/注册的代码进行任何修改或更改。我很失落,非常绝望。

register() {
  var username = this.username;
  var password = this.password;
  var email = this.email;
  var password_again = this.password;
  var referral = this.referral;
  var captcha = document.querySelector("#g-recaptcha-response").value;


  // set loading state
  this.loading = true;

  let pattern = /^[0-9a-zA-Z]+$/;
  // check if username is not alphanumeric
  if (!this.username.match(pattern)) {
    return alert('Your username can not contain any non-alphanumeric characters');
  }

  // if passwords don't match
  if (password !== password_again) {
    return alert('Your passwords do not match');
  }

  console.log('CAPTCHA RESPONSE');
  console.log(captcha);

  return; /** End here */

  this.$http({
    method: 'POST',
    url: api.dev + 'api/v1/register',
    data: {
      username,
      email,
      password,
      password_again: this.password,
      referral,
      captcha: captcha
    }
  }).then(res => {
    console.log(res.data);
    if (res.data.success == true) {
      this.success = true;
      setTimeout(() => {
        $("#registerModal").modal('toggle');
        $('#loginModal').modal('toggle');
        this.success = false;
        this.error = "";
      }, 1200)
      return;
    } else {
      this.error = res.data.message
      this.loading = false;
    }


  })
}
<form @submit.prevent='register' method='POST'>
  <div class="form-group">
    <!-- <input type="text" class="form-control" placeholder='Username...' v-model='username'> -->

    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">Username</span>
      </div>

      <input type="text" class="form-control" placeholder="Username" v-model="username">
    </div>
  </div>

  <div class="form-group">
    <div class="input-group mb-3">

      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">Password</span>
      </div>

      <input type="text" class="form-control" placeholder="Password..." v-model="password" style='height: 40px;'>

      <div class="input-group-append">
        <span class="input-group-text" id="basic-addon1" @click='generatePassword'>
                                            <img src="../../assets/icons/refresh.png" alt="" style='width: 20px;'>
                                        </span>
      </div>
    </div>

    <!-- PASSWORD AGAIN -->
    <div class="input-group mb-3">

      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">Repeat Password</span>
      </div>

      <input type="text" class="form-control" placeholder="Repeat password..." v-model="password_again" style='height: 40px;'>
    </div>
  </div>

  <!-- <div class="form-group text-center">
                                <input type="text" class="form-control" placeholder="Referal ID" v-model="referral" style='height: 40px;'>
                                <p class="small text-white mt-1 text-center">If you were referred by a friend, enter their code to gift with 0.1 mBTC</p>
                            </div> -->

  <div class="form-group text-center">
    <p class="text-white mb-0 h6">Account recovery options</p>
    <!-- <p class="small text-white">Please note that our account recovery system has not yet been implemented. Please ensure you do not forget your password as we will not be able to recover it for you</p> -->
  </div>

  <div class="form-group">
    <input type="email" class="form-control" placeholder='Your e-mail address...' v-model='email'>
  </div>

  <!-- <div class="form-group">
                                <input type="checkbox" class='form-check-input' id='checkbox-recover'>
                                <label class="text-white text-center small mb-1" for='checkbox-age'>
                                    I don't want a way to recover my account. If I forget my password,
                                    lock my account permanently.
                                </label>
                            </div> -->

  <!-- <hr> -->

  <div class="form-group">
    <input type="checkbox" class='form-check-input' id='checkbox-age'>
    <label class="text-white text-center small mb-1" for='checkbox-age'>
                                    I am 18 or older, gambling is legal in my jurisdiction and I agree
                                    with the <a data-toggle='modal' data-target='#tosModal'>Terms of Service</a>
                                </label>

  </div>
  <!-- <br> -->
  <div class="form-group text-center">
    <!-- TESING / LOCAL HOST -->
    <div class="g-recaptcha d-inline-block" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_xxxxxxx"></div>
  </div>

  <div class="form-group">
    <p class="text-danger text-center" v-show='error && error.length > 1'>{{error}}</p>
  </div>

  <div class="form-group text-center my-4">
    <button type="submit" class='rounded' v-if='!loading'>Submit</button>
    <button type="submit" class='rounded' v-else>Loading...</button>
  </div>

</form>

0 个答案:

没有答案