React JS Yup+Formik触发函数与每次验证

Question

我使用Formik和Yup进行验证，使用useFormik() hook，如下所示：

const formik = useFormik({
initialValues,
validationSchema: yup.object({
password: yup
.string()
.required('Please enter a password ')
.matches(/[a-z]/, ONE_LETTER_MESSAGE)
.matches(/d/, ONE_NUMBER_MESSAGE)
.matches(/[A-Z]/, CAPITAL_LETTER_MESSAGE)
.matches(/[`!@#$%^&*()_+-=[]{};':"\|,.<>/?~]/, SPECIAL_CHAR_MESSAGE)
.min(18, EIGHTEEN_CHARS_MESSAGE),
}),
onSubmit: handleOnSubmit,
});

我想跟踪yup执行的验证的状态——如果每个验证(如.matches(/\d/，ONE_NUMBER_MESSAGE(等(都得到了验证或没有得到验证，则显示在一个单独的列表中，以便用户知道其中哪一个得到了满足。

在验证过程中调用.matches(/d/, ONE_NUMBER_MESSAGE)、.matches(/[A-Z]/, CAPITAL_LETTER_MESSAGE)等函数时，是否可以触发函数？

Answer 1

根据您对原始问题的评论，我认为您需要向用户显示错误。

当模式运行时，Formik获取该模式的结果，并将产生的错误(如果有(置于Formik内部的errors状态。

通过在render中执行此操作，您应该能够访问password字段的错误——这将返回您在模式中定义的用户友好的字符串错误：

formik.errors.password

如果你真的想做的不仅仅是显示(通过it函数运行它(，你可以在deps数组中创建一个useEffect钩子。