Password validate with vuelidate in vuejs?

user_8435614 0
Viewed 5359

I got the reference from How to validate password with 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>

How to validate the password with vuelidate, i am having regex value in validationStatus and on button click how to check the regex validation.

Trying for if password is validated success with regex validation, move to next screen else till success he need to stay in current screen.

vue.js javascript
1 Answers

Try below steps to resolve the issue

Step 1: validations modified like below

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") },
},
},

Step 2: RegisterMe button click event

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");
  }
},
},

Step 3: compute function to disable Register button

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

Step 4: HTML template be like

<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>

DEMO

user_26893250
Related