How to validate password with Vuelidate? - vue.js

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

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

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