How to validate password with Vuelidate?

Question

Greeting, i need to validate the password form In addition to the field required Must have at least one uppercase letter, lowercase letter at least, number at least one and at least one of the following characters "#?! @ $% ^ & * -" I am using this package https://vuelidate.js.org/

EDIT

OR REGEX FOR THIS

Gourley

Answer 1

Just add a custom function with the rules you want to the Vuelidate validations.

validations: {
  password: {
    required,
    // minLength: minLength(8)  // I assume you'd want something like this too
    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
    }
  }
}

It'd probably be helpful to break each requirement up into a separate function, so you can set a different error message for each (which would be helpful to guide the user as to what to they need to fix).

validations: {
  password: {
    required,
    // minLength: minLength(8)  // I assume you'd want something like this too
    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)
    }
  }
}

Mount

Nice answer! I used the separate way (2nd code block) and I had to negate the return value to make it work. – Aidaaidan

I always end up flip flopping the boolean in these functions for some reason. I think you're right. I've updated the answer. Thanks for pointing it out. – Mount

Can you please send the codesandbox link for the above,I am checking for the same with vuelidate – Gale

@taneerudhanunjay Please find the link codesandbox.io/s/dank-worker-vkfix – Ayer

Answer 2

To extend on Keegan's answer, you can include the helpers.withMessage method to include a custom error message on your password validation. I merged the regex to make it easier and simpler for handling the error message.

import useVuelidate from '@vuelidate/core'
import { helpers, required, email, minLength, maxLength, sameAs } from '@vuelidate/validators'

export default {
 setup () {
    return {
      v$: useVuelidate({
        $lazy: true,
        $autoDirty: true,
      })
    }
  },
  validations () {
    return {
      firstName: { required, minValue: minLength(4), maxValue: maxLength(40), },
      lastName: { required, minValue: minLength(4), maxValue: maxLength(40), },
      email: { required, email, },
      password: {
        required,
        minLength: minLength(6),
        containsPasswordRequirement: helpers.withMessage(
          () => `The password requires an uppercase, lowercase, number and special character`, 
          (value) => /(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])/.test(value)
        ),
      },
      confirmPassword: { required, sameAsPassword: sameAs(this.password) }
    }
  },
  data() {
    return {
      firstName: '',
      lastName: '',
      email: '',
      password: '',
      confirmPassword: '',
    }
  },
  ...

Bryannabryansk

Answer 3

Extending the answer by @Keegan and combining it with @BuffMcBigHuge's. Adding messages separately for each validation

return {        
    password: {
      required: helpers.withMessage('Password cannot be blank', required),
      minLength: minLength(6),
      containsLowerCase: helpers.withMessage(
        () => `The password must contain a lowercase character`, 
        (value) => /[a-z]/.test(value)
      ),
      containsUppercase: helpers.withMessage(
        () => `The password must contain an uppercase character`, 
        (value) => /[A-Z]/.test(value)
      ),
      containsNumber: helpers.withMessage(
        () => `The password must contain a number`, 
        (value) => /[0-9]/.test(value)
      ),
      containsSpecialCharacter: helpers.withMessage(
        () => `The password must contain special character`, 
        (value) => /[#?!@$%^&*-]/.test(value)
      ),
    },
    confirmPassword: {
      required: helpers.withMessage('Confirm password cannot be blank', required),
      sameAs: helpers.withMessage("Passwords don't match", sameAs(formData.password)),
    },
  };

Shelves