Password validate with vuelidate in vuejs?

Question

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.

Jebasuthan · Accepted Answer · 2021-03-18T12:48:41.390

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

Its working fine but, In the Register button, i have :disabled="user.confirmPassword != user.password. and :disabled="this.isDisabled" — T dhanunjay, Mar 18 '21 at 12:39
How can i merge both conditions together to satisfy both the conditions — T dhanunjay, Mar 18 '21 at 12:40
@santoshchandu You dont wants to validate other form fields then remove from validation. Once the form is valid then button will be automatically enabled otherwise it will be disabled. — Jebasuthan, Mar 18 '21 at 12:42
@santoshchandu Register button you should have only one disable confitions :disabled="this.isDisabled". No need to do the validation again for checking password and confirm passwords are same. Validation condition will taken care your validations. — Jebasuthan, Mar 18 '21 at 12:48

Password validate with vuelidate in vuejs?

1 Answers1

Linked