Vue js регистрация пароля длиной до 8 не работает - PullRequest
0 голосов
/ 15 марта 2020

Здравствуйте, моя проблема в том, что у меня есть страница регистрации, и пароль должен быть длиной не менее 8 символов, но я могу сделать пароль из 6 символов.

Я не знаю, как это исправить. Я попытался найти по inte rnet, но не смог это исправить.

Вот картинка, когда в вашем пароле прописные буквы, строчные буквы и цифры, после чего вы видите значок под строчные буквы.

enter image description here

<div class="form-group row">
                <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
                <div class="col-md-6">
                  <div class="input_container">
                  <input type="password" 
                    @input="p_len" 
                    class="form-control" 
                    id="password"
                    name="password"
                    required
                    v-model="password"/>
                <span v-bind:class="{valid_password_length: valid_password_length , show_password_length: typed}" 
                  class="password_length">
                  {{password_length}}
                </span>
              </div>
              <div class="lnu_container">
                <p v-bind:class="{ uppercase_valid: contains_uppercase }">Uppercase</p>
                <p v-bind:class="{ lovercase_valid: contains_lovercase }">Lowercase</p>
                <p v-bind:class="{ number_valid: contains_number }">Number</p>
              </div>
              <div class="valid_password_container" v-bind:class="{show_valid_password_container : valid_password }">
                <svg width="100%" height="100%" viewBox="0 0 140 100">
                  <path class="tick" v-bind:class="{checked: valid_password }" d="M10, 20 l25,40 l95,-70" />
                </svg>
              </div>
              </div>
            </div>
              <div class="form-group row mb-0">
                <div class="col-md-8 offset-md-4">
                  <button type="submit" @click="register" class="btn btn-primary">Register</button>
                </div>
              </div>
import firebase from "firebase";
/* eslint-disable */
export default {
  data() {
    return {
      name: "",
      email: "",
      password: "",
      password_length: 0,
      typed: false,
      contains_lovercase: false,
      contains_number: false,
      contains_uppercase: false,
      valid_password_length: false,
      valid_password: false
    };
  },
  methods: {
    register(e) {
      firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
        .then(user => {
          alert('Account created for ' + this.email);
          this.$router.push('/signin');
        },
        err => {
          alert(err.message);
        })
      e.preventDefault();
    },
    p_len() {
      this.password_length = this.password.length;
      if (this.password_length > 7) {
        this.valid_password_length = true;
      } else {
        this.valid_password_length = false;
      }

      if (this.password_length > 0) {
        this.typed = true;
      } else {
        this.typed = false;
      }

      this.contains_lovercase = /[a-z]/.test(this.password);
      this.contains_number = /\d/.test(this.password);
      this.contains_uppercase = /[A-Z]/.test(this.password);

      // Check if the password is valid
      if (this.contains_lovercase == true && this.contains_number == true) {
        this.valid_password = false;
      if (this.contains_uppercase == true && this.valid_password_length == true)
        this.valid_password = true;
      } else {
        this.valid_password = false;
      }
    }
  }
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...