reactjs - Yup 模式可以报告违反规则的组合吗？

Question

我正在使用Formik构建一个带有email和password输入的简单注册表单。如果他们的密码符合某些标准规则集，我希望能够实时显示用户，例如

• 这是必需的
• 最小字符长度
• 必须包含至少 1 个数字
• 必须包含至少 1 个特殊字符

有点像这个例子：

但是，通过Yup进行的验证以及所有 Formik 的验证文档似乎都填充了一个errorsprop对象，该对象仅显示每个字段的一个验证错误，而不是报告当前通过/失败的任何组合。

例如，该errors对象{email: "Required", password: "Needs to be at least X characters"}可能指的是一个"abc"简短的密码，但也没有数字或特殊字符。

虽然有可能！我们可以发送<Formik>一个自定义validate函数，errors用所有规则填充道具：

<Formik
  initialValues={initialValues}
  onSubmit={handleSubmit}
  validate={values => ({
    email: {
      required: ...,
      isEmail: ...
    },
    password: {
      required: ...,
      meetsMinLength: ...,
      containsDigit: ...,
      containsSpecial: ..., 
    }
  })}
  validateOnChange={true}
> 
  {formik => (
    ... render form, inputs, errors, etc ...
    ... "formik.errors" looks like "{email: {...}, password: {...}}" ...
  )}
</Formik>

这行得通，但是我真的很喜欢Yup的声明性，并希望继续使用它。是否可以制定一个 YupSchema来报告所有错误组合，如这个自定义validate函数？

标签： reactjsformspasswordsformikyup