Я получил ссылку от Как проверить пароль с помощью Vuelidate?

 validations: {

    user: {
      password: { required, 
        containsUppercase: function(value) {
          return /[A-Z]/.test(value)
        },
        containsLowercase: function(value) {
          return /[a-z]/.test(value)
        },
        containsNumber: function(value) {
          return /[0-9]/.test(value)
        },
        containsSpecial: function(value) {
          return /[#?!@$%^&*-]/.test(value)
        },
        
        
        minLength: minLength(8),maxLength: maxLength(19) },
      confirmPassword: { required, sameAsPassword: sameAs("password") },
    }, 
    }
<input
                  :type="passwordFieldType"
                  v-model="user.password"
                  v-model.trim="$v.user.password.$model"
                  id="password"
                  name="password"
                  class="input-section-three-login"
                  :class="{'is-invalid': validationStatus($v.user.password) }"                  
                  placeholder="Enter new password"
                  :maxlength="maxpassword" 
                  v-on:keypress="isPassword($event)"

                />
                
                
 <button v-on:click="registerMe" :disabled="user.confirmPassword != user.password   " :class="(isDisabled) ? '' : 'selected'" > Register
</button>

Как проверить пароль с помощью vuelidate, у меня есть значение регулярного выражения в validationStatus и при нажатии кнопки, как проверить проверку регулярного выражения.

Попытка проверить, успешно ли подтвержден пароль с проверкой регулярного выражения, перейти к следующему экрану еще до успеха, он должен оставаться на текущем экране.

2
santosh chandu 18 Мар 2021 в 12:48

1 ответ

Лучший ответ

Попробуйте следующие шаги, чтобы решить проблему

Шаг 1: validations изменено, как показано ниже

validations: {
user: {
  password: { required, 
    valid: function(value) {
      const containsUppercase = /[A-Z]/.test(value)
      const containsLowercase = /[a-z]/.test(value)
      const containsNumber = /[0-9]/.test(value)
      const containsSpecial = /[#?!@$%^&*-]/.test(value)
      return containsUppercase && containsLowercase && containsNumber && containsSpecial
    },
    minLength: minLength(9),
    maxLength: maxLength(19),
  },
  confirmPassword: { required, sameAsPassword: sameAs("password") },
},
},

Шаг 2. Событие нажатия кнопки RegisterMe

methods: {
registerMe() {
  this.submitted = true;
  this.$v.$touch();
  if (this.$v.$invalid) {
    return false; // stop here if form is invalid
  } else {
    alert("Form Valid. Move to next screen");
  }
},
},

Шаг 3: функция compute для отключения кнопки Register

computed: {
isDisabled() {
  return this.$v.$invalid;
},
},

Шаг 4: HTML-шаблон похож на

<form @submit.prevent="registerMe" novalidate>
  <div class="form-group">
    <input
      type="password"
      class="form-control"
      placeholder="Enter Password"
      value=""
      v-model="user.password"
      autocomplete="off"
    />
    <div
      v-if="this.submitted && $v.user.password.$error"
      class="invalid-feedback left">
      <span v-if="!$v.user.password.required">Password is required</span>
      <span v-if="user.password && !$v.user.password.valid">Password contains atleast One Uppercase, One Lowercase, One Number and One Special Chacter</span>
      <span v-if="user.password && $v.user.password.valid && !$v.user.password.minLength">Password must be minimum 9 characters</span>
      <span v-if="user.password && !$v.user.password.maxLength">Password must be maximum 19 characters</span>
    </div>
  </div>
  <div class="form-group">
    <input
      type="password"
      class="form-control"
      placeholder="Confirm Password"
      value=""
      v-model="user.confirmPassword"
      autocomplete="off"
    />
    <div
      v-if="this.submitted && $v.user.confirmPassword.$error"
      class="invalid-feedback left"
    >
      <span v-if="!$v.user.confirmPassword.required"
        >Confirm Password is required</span
      >
      <span
        v-if="
          user.confirmPassword && !$v.user.confirmPassword.sameAsPassword
        "
        >Password and Confirm Password should match</span
      >
    </div>
  </div>
  <input
    type="submit"
    class="btnRegister"
    value="Register"
    :disabled="this.isDisabled"
  />
</form>

ДЕМО

0
Jebasuthan 18 Мар 2021 в 12:48