javascript - 使用 Yup 和 Formik 创建带有个别错误消息的强密码

Question

我有什么

我试图在另一个 answer 中创建一个验证输入强度的密码字段我找到了可以用来验证输入是否满足特定条件的 regex，这种方法的问题是它只会为每次验证抛出一条错误消息。

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"
    ),

我想要什么

我想要的是验证用户输入的每个字符并在满足每个条件时抛出特定错误，例如，如果用户输入缺少小写字母，它应该抛出错误“必须有小写字母” '，如果输入缺少一个数字，它应该抛出数字'必须有一个数字'等等。我试过的是使用匹配，但这不起作用:

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

Answer 1

你只需要删除^(匹配输入的开头)和$(匹配输入的结尾)assertions从你的代码中，像这样:

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"),

这是一个demo .