如何在本机反应中使用 yup 验证相互依赖的字符串

Posted 2023-02-16

【中文标题】如何在本机反应中使用 yup 验证相互依赖的字符串

【英文标题】：How to validate interdependent strings using yup in react native

【发布时间】：2022-01-19 14:20:10

【问题描述】：

我有两个日期字符串 start_date 和 end_date。下面有空字符串作为初始值：

export interface FilterSchema 
    start_date?: any;
    end_date?: any;


const initialValues: FilterSchema = 
    start_date: '',
    end_date: '',
;

最初它们都是空的。但是如果其中一个被选中，那么其他的也需要被选中。如果没有选择它们，则不需要验证。所以我通过以下方式使用yup：

const filterSchema = yup.object().shape(
  start_date: yup.string().when('end_date', 
    is: value => value && value != '',
    then: yup.string().required('Required'),
  ),
  end_date: yup.string().when('start_date', 
    is: value => value && value != '',
    then: yup.string().required('Required'),
  ),
);

但我收到错误消息：

Cyclic dependency, node was: "end_date"

我在Formik中使用filterSchema：

<Formik
  onSubmit=facilityFilter
  validationSchema=filterSchema
  ....

【参考方案1】：

依赖于另一个字段的字段需要以正确的顺序构造，即如果 endDate 依赖于 startDate 则 startDate 需要先行，但是在您的情况下，您希望在构造完所有内容后进行验证。是的，无法弄清楚这一点，因此它会引发循环依赖错误。 如果你想告诉 Yup 忽略排序，你可以在 shape 方法的第二个参数中添加一个字段对数组

const filterSchema = yup.object().shape(
  start_date: yup.string().when('end_date', 
    is: value => value && value != '',
    then: yup.string().required('Required'),
  ),
  end_date: yup.string().when('start_date', 
    is: value => value && value != '',
    then: yup.string().required('Required'),
  ),
, [["start_date", "end_date"]]);

这不是 yup 的创建者在此指出的处理周期性依赖的最佳解决方案：https://github.com/jquense/yup/issues/720