How to validate password with Vuelidate?

user_13252000 0
Viewed 6964

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

vue-validator vuelidate vue.js
2 Answers

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)
    }
  }
}
user_1602560

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: '',
    }
  },
  ...
user_42760070
Related