javascript - Creating a strong password with Yup and Formik with individual error messages - Stack Overflow

admin管理员组

文章数量:1356554

What I have

I'm trying to create a password field which validates the strength of the input, in another answer I found the regex I can use to validate if the input meets specific conditions, the problem with this approach is that it throws only one error message for each of the validations.

password: yup
    .string()
    .required('Please Enter your password')
    .matches(
      /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
      "Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and one special case Character"
    ),

What i want

what I want is validate each of the characters that the user enters and throw the specific errors if each of the conditions are fulfilled, e.g if user inpunt is missing a lower case, it should throw the error 'must have a lower case', if the input is missing a number, it should throw the number 'must have a number' and so on. What I've tried it's to use match but this doesn't work:

password: yup
    .string()
    .required('Please Enter your password')
    .matches(/^[a-z]+$/, 'One lowercase character')
    .matches(/^[A-Z]+$/, 'One uppercase character')
    .matches(/^\d+$/, 'One number')
    // ... other validation

What I have

I'm trying to create a password field which validates the strength of the input, in another answer I found the regex I can use to validate if the input meets specific conditions, the problem with this approach is that it throws only one error message for each of the validations.

password: yup
    .string()
    .required('Please Enter your password')
    .matches(
      /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
      "Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and one special case Character"
    ),

What i want

what I want is validate each of the characters that the user enters and throw the specific errors if each of the conditions are fulfilled, e.g if user inpunt is missing a lower case, it should throw the error 'must have a lower case', if the input is missing a number, it should throw the number 'must have a number' and so on. What I've tried it's to use match but this doesn't work:

password: yup
    .string()
    .required('Please Enter your password')
    .matches(/^[a-z]+$/, 'One lowercase character')
    .matches(/^[A-Z]+$/, 'One uppercase character')
    .matches(/^\d+$/, 'One number')
    // ... other validation

• javascript
• reactjs
• formik
• yup

Share Improve this question Follow edited Apr 13, 2021 at 12:41 Ajeet Shah 19.9k99 gold badges6464 silver badges104104 bronze badges asked Apr 12, 2021 at 2:58 Cristian FlórezCristian Flórez 2,81188 gold badges3535 silver badges6262 bronze badges 2

• I'd highly remend a different password requirement. xkcd./936 Convoluted, hard-to-remember but short passwords are probably the worst approach there is – CertainPerformance Commented Apr 12, 2021 at 2:59
• understood, but I still want to know the approach to use to solve this kind of problems, individual regex validations with Yup and formik. – Cristian Flórez Commented Apr 12, 2021 at 3:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

You just need to remove ^ (matches the beginning of input) and $ (matches the end of input) assertions from your code, like so:

password: Yup.string()
  .required("Required")
  .min(8, "Must be 8 characters or more")
  .matches(/[a-z]+/, "One lowercase character")
  .matches(/[A-Z]+/, "One uppercase character")
  .matches(/[@$!%*#?&]+/, "One special character")
  .matches(/\d+/, "One number"),

Here is a demo.

本文标签： javascriptCreating a strong password with Yup and Formik with individual error messagesStack Overflow