如何使用 yup 以 React hook 形式一次验证一个字段

Question

我有一个呈现不同组件的测验组件，但我为它们使用单一表单，我希望验证一次只发生一个数据：

export const QUIZ_SCHEMA = yup.object().shape({
  radioGroup: yup.number().required('Please select an option to proceed'),
  arrangedText: yup.array().length(5, 'Please answer the question to proceed'),
  essay: yup
    .string()
    .required('Answer is required')
    .min(2, 'Min 2 characters required')
    .max(1000, 'Max 1000 characters allowed'),
});

也就是说，当呈现单选按钮组件时，它应该仅对其进行验证，依此类推。

  const {
    control,
    handleSubmit,
    formState: { errors, isValid },
    reset,
  } = useForm({
    defaultValues: {
      radioGroup: undefined,
      arrangedText: [],
      essay: '',
    },
    resolver: yupResolver(QUIZ_SCHEMA),
  });

Answer 1

Formik 确实提供了以下道具

• 验证表单
• 验证字段
• 验证模糊
• 更改时验证
• 安装时验证

您可以使用它们来自定义验证的工作方式。
我已在下面附加了 formik 文档的链接。
希望这有帮助！
点击此处查看Formik官方文档