On my registration page, I implemented a custom validator to ensure that the password meets specific criteria such as being at least 12 characters long and containing at least one digit.
However, I encountered an issue where the custom validator was not receiving the input value when triggered, resulting in undefined values being shown in the console. To troubleshoot, I used mustache code to verify that the input data was indeed being transferred to the variable successfully.
You can find the validator code below:
import { minLength, helpers } from '@vuelidate/validators'; // imports are working fine
const passwordValidators = {
minLength: minLength(12),
containsUppercase: helpers.withMessage(
() => 'Password does not contain any Uppercase characters (A-Z)',
function(value: string): boolean {
console.log(value); // value is undefined
return /[A-Z]/.test(value);
}
),
containsLowercase: helpers.withMessage(
() => 'Password does not contain any lowercase characters (a-z)',
function(value: string): boolean {
console.log(value); // value is undefined
return /[a-z]/.test(value);
}
),
containsNumber: helpers.withMessage(
() => 'Password does not contain any digit characters (0-9)',
function(value: string): boolean {
console.log(value); // value is undefined
return /[0-9]/.test(value);
}
)
}
export default passwordValidators
Here's how it is incorporated into a vue.js component:
//somewhere up
import passwordValidators from '@/validators/password-requirements';
import { required, email, sameAs } from '@vuelidate/validators';
//inside defineComponent
validations() {
return {
email: { required, email },
password: {
required,
passwordValidators
},
firstName: { required },
lastName: { required },
confirmPassword: { required, sameAsPassword: sameAs(this.password) }
}
},
The versions of the libraries used are:
- "@vuelidate/core": "^2.0.0-alpha.34",
- "@vuelidate/validators": "^2.0.0-alpha.26",