使用 Yup 和 react-hook-form 在多个字段的表单级别进行验证

如何解决使用 Yup 和 react-hook-form 在多个字段的表单级别进行验证

我目前有以下带有 react-hook-form 的 Yup 验证架构：

  const schema = yup.object().shape({
    externallyPrintedLabelsQty: yup
      .number()
      .typeError("Number of Labels (printed outside) must be a number")
      .required()
      .integer()
      .min(0)
      .max(2)
      .test(
        "maxLabels","A maximum of two labels per pack,either printed internally or externally,is allowed.",function (value: any) {
          const { internallyPrintedLabelsQty } = this.parent;
          return value + internallyPrintedLabelsQty < 3;
        }
      ),internallyPrintedLabelsQty: yup
      .number()
      .typeError("Number of Labels (printed inside) must be a number")
      .required()
      .integer()
      .min(0)
      .max(2),});

这很好用。但是，.test 验证附加到特定字段（即 externallyPrintedLabelsQty）。 有没有办法将 .test 附加到整个表单而不是特定字段，或者测试用户是否在表单级别选择了 2 个以上的标签，无论它们是内部打印还是外部打印？

预先感谢您的帮助。

解决方法

.test 也是 Yup.object 的一个方法。这意味着将 .test 附加到您的 ObjectSchema 可以解决问题，如下所示：

const schema = yup
    .object()
    .shape({
        externallyPrintedLabelsQty: yup
            .number()
            .typeError('Number of Labels (printed outside) must be a number')
            .required()
            .integer()
            .min(0)
            .max(2),internallyPrintedLabelsQty: yup
            .number()
            .typeError('Number of Labels (printed inside) must be a number')
            .required()
            .integer()
            .min(0)
            .max(2),})
    .test(
        'maxLabels','A maximum of two labels per pack,either printed internally or externally,is allowed.',(value) => {
            const externallyPrintedLabelsQty =
                value?.externallyPrintedLabelsQty ?? 0;
            const internallyPrintedLabelsQty =
                value?.internallyPrintedLabelsQty ?? 0;

            return externallyPrintedLabelsQty + internallyPrintedLabelsQty < 3;
        }
    );