Question

我在reactjs中使用formik进行表单管理，我对使用yup进行验证有疑问。

我有两个字段，一个是选择控件来选择国家/地区，另一个是邮政编码。

在国家/地区阵列中，我们有正则表达式验证邮政编码，其目的是使用当前所选国家/地区的正则表达式验证输入的邮政编码，有人可以提供有关如何执行此操作的线索。

Answer 1

一个字段的示例，该字段的数字值不能大于其他两个字段值的乘积

const validationSchema = Yup.object().shape({
    num1: Yup.number().positive().required('This field is required.'),
    num2: Yup.number().positive().required('This field is required.'),
    num3: Yup.number().positive().required('This field is required.').when(['num1', 'num2'], (num1, num2, schema) => {
        return num1 > 0 && num2 > 0 ? schema.max(num1 / num2) : schema.max(0);
    })
});

Answer 2

let schema = object({
  isBig: boolean(),
  count: number()
    .when('isBig', {
      is: true, // alternatively: (val) => val == true
      then: yup.number().min(5),
      otherwise: yup.number().min(0),
    })
});

Answer 3

我有完全相同的问题。我能够使用save(obj, file = next_rda())来解决它。

when

Answer 4

使用.when()并传递一个函数，该函数根据国家/地区的值返回邮政编码的架构。

Answer 5

以下是强制日期选择器的结束日期为 after 开始日期的示例：

const schema = Yup.object().shape({
    start_date: Yup.date()
        .typeError('Start Date is required')
        .required('Start Date is required'),
    end_date: Yup.date()
        .typeError('End Date is required')
        .required('End Date is required')
        .when('start_date', (start_date) => {
            if (start_date) {
                return Yup.date()
                    .min(start_date, 'End Date must be after Start Date')
                    .typeError('End Date is required')
            }
        }),
})

需要在加载表单时放入 if 语句以正确验证，并且还需要放入 typeError 规则以在选择开始日期时正确验证，但是尚未结束。

重要的是你可以看到 when 的用法；第一个参数是要检查的字段，第二个参数是验证函数，它返回一个 Yup 验证对象。

我尝试只返回 true 或 false，但它似乎会抛出错误，因此它比纯粹的验证函数要复杂一些。

Yup验证与两个相关的领域

5 个答案: