10

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

TEtet
  • 129
  • 1
  • 9

2 Answers2

30

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)
    }
  }
}
Keegan
  • 11,345
  • 1
  • 25
  • 38
  • Nice answer! I used the separate way (2nd code block) and I had to negate the return value to make it work. – seniorpreacher Oct 18 '20 at 12:07
  • 1
    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. – Keegan Oct 19 '20 at 01:13
  • Can you please send the codesandbox link for the above,I am checking for the same with vuelidate – T dhanunjay Mar 18 '21 at 10:26
  • @taneerudhanunjay Please find the link https://codesandbox.io/s/dank-worker-vkfix – Jebasuthan Mar 18 '21 at 11:06
1

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: '',
    }
  },
  ...
BuffMcBigHuge
  • 579
  • 5
  • 8