1

I am trying to add password rules in my vue app. I am using vuetify version 2.3.10.

This is what I have so far, and I am not able to figure out how can I add the validation for password to include special characters, capital letter and number.

passwordRules: [
 value => !!value || 'Please enter a password',
 (value) => !!value || 'Please type password.',
 (value) => (value && value.length >= 6) || 'minimum 6 characters',
]

Help me resolve this issue.

user12763413
  • 1,177
  • 3
  • 18
  • 53

1 Answers1

4

Useful topic:

https://stackoverflow.com/a/21456918/7158959

passwordRules: [
 value => !!value || 'Please enter a password',
 (value) => !!value || 'Please type password.',
 (value) => (value && /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/.test(value)) || 'Minimum 6 characters, One capital latter, Special charater, Number',
]


console.log(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/.test("hEse%9"))

As requested to brake it down:

passwordRules: [
 value => !!value || 'Please enter a password',
 (value) => !!value || 'Please type password.',
 (value) => (value && /\d/.test(value)) || 'At least one digit',
 (value) => (value && /[A-Z]{1}/.test(value)) || 'At least one capital latter',
 (value) => (value && /[^A-Za-z0-9]/.test(value)) || 'At least one special character',
 (value) => (value && value.length < 6 ) || 'minimum 6 characters',
]


console.log(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/.test("hEse%9"))

console.log(/\d/.test("hE4se%")) // digit
console.log(/[A-Z]{1}/.test("hE4se%")) // Capital latter
console.log(/[^A-Za-z0-9]/.test("hE#4se")) // Special character

Also your length needs to be checked with < 6 I believe.

ikiK
  • 6,328
  • 4
  • 20
  • 40
  • Is there a way to have a separate error for each like min charater, capital letter, special character and number instead of combining into one? So that only that message comes up which is missing – user12763413 May 01 '21 at 16:28