Formik + Yup -如何验证输入本身的值与另一个?

Question

我想做以下验证:

• 如果必须通知优惠券，则会出现错误消息，但即使使用以下代码，这也是不可能的。

import * as yup from 'yup';
export type FormValues = {
promotionalCode: string;
requirePromotionalCode: boolean;
};
export const validationSchema = yup.object().shape({
requirePromotionalCode: yup.boolean(),
promotionalCode: yup.string().when('requirePromotionalCode', {
is: true,
then: yup.string().required('Please, enter a coupon'),
otherwise: yup.string().notRequired(),
}),
});

我尝试了如下方法，但没有效果。

import * as yup from 'yup';
export type FormValues = {
promotionalCode: string;
requirePromotionalCode: boolean;
};
export const validationSchema = yup.object().shape({
requirePromotionalCode: yup.boolean(),
promotionalCode: yup.string().when('requirePromotionalCode', {
is: (requirePromotionalCode, promotionalCode) =>
requirePromotionalCode && !promotionalCode,
then: yup.string().required('Please, enter a coupon'),
otherwise: yup.string().notRequired(),
}),
});

Answer 1

当工作正常时，您必须将promotionalCode和requirePromotionalCode添加到initialValues和Yup模式形状中。

一般来说，当使用validationSchema时，最佳实践是确保所有表单字段都有初始值，以便Yup可以立即看到它们。

结果如下:

& lt; FormikinitialValues={{promotionalCode: "， requirePromotionalCode: false}}validationSchema = {Yup.object () .shape ({…

Answer 2

在许多情况下，.test()可以工作(阅读这里的文档)。

这是解决这个问题的例子:

import * as yup from 'yup';
export type FormValues = {
promotionalCode: string;
requirePromotionalCode: boolean;
};
export const validationSchema = yup.object().shape({
requirePromotionalCode: yup.boolean(),
promotionalCode: yup.string().test(
'requirePromotionalCode',
'Please, enter a coupon',
(value, context) => context.requirePromotionalCode && !!value
),
});

需要注意的是，.test()期望值true通过'测试'，因此当requirePromotionalCode为真并且promotionalCodevalue不为空时，返回值应该为真。

否则，将抛出第二个参数中的错误消息。

希望有帮助!