Javascript react.js formik 和 yup 多个错误显示

要一次显示所有密码错误，您可以使用validate方法，而不是链接多个matches调用.这允许您编写一个定制函数，您可以在其中添加您的定制验证，并在您认为合适的时候添加错误.

下面是一个如何实现这一目标的例子:

const validationPageTwo = Yup.object({
  email: Yup.string().required("Required field"),
  password: Yup.string()
    .required("Required field password")
    .validate(value => {
      let errors = [];

      if (!/^(?=.{8,})/.test(value)) {
        errors.push("Must Contain 8 Characters");
      }

      if (!/^(?=.*[!@#\$%\^&\*])/.test(value)) {
        errors.push("One Special Case Character");
      }

      if (!/^(?=.*[0-9])/.test(value)) {
        errors.push("One Number");
      }

      if (!/^(?=.*[a-z])/.test(value)) {
        errors.push("One Lowercase");
      }

      if (!/^(?=.*[A-Z])/.test(value)) {
        errors.push("One Uppercase");
      }

      if (errors.length > 0) {
        return new Yup.ValidationError(errors, value, 'password');
      }

      return value;
    }),
});

在上述模式中，如果密码值不符合要求，则密码字段将以数组形式一次性返回其所有错误.

然后，您可以在表单中通过映射列出所有密码错误，如下所示:

{
  errors.password && errors.password.inner.map((err, index) => <p key={index}>{err.message}</p>)
}

请记住将errors.password替换为窗体状态下Password Errors对象的实际路径.

请记住，validate函数必须要么返回验证值(如果验证成功)，要么抛出Yup.ValidationError(如果验证失败)，要么返回promise .

此外，对于邮箱验证，您可能需要添加一条规则以确保它确实是邮箱:

email: Yup.string()
    .required("Required field")
    .email("Must be a valid email address"),

还请注意，使用Formik+Yup，来自Yup的错误可以在Formik向您的表单提供的错误props 中找到.