forms - 使用 yup 和自定义验证验证 react-final-form 表单

Question

我有一个用 react-final-form 创建的表单和一个如下所示的验证函数

export const validate = async (values, schema) => {
  if (typeof schema === 'function')
    schema = schema();

  try {
    await schema.validate(values, { abortEarly: false });
  } catch (e) {
    return e.inner.reduce((errors, error) => {
      return setIn(errors, error.path, error.message);
    }, {});
  }
};

所以当我呈现我的表单时，它看起来像这样

<Form
  onSubmit={handleSubmit}
  validate={values => validate(values,schema())}
/>

Schema 是一个 Yup 模式，定义如下

const schema = () =>

    yup.object().shape({
        name: yup
            .string()
            .max(255)
            .required(REQUIRED_FIELD),
        number: yup
            .string()
            .required(REQUIRED_FIELD),
        exp_year: yup
            .number()
            .required(REQUIRED_FIELD),
        exp_month: yup
            .number()
            .min(1,'Invalid')
            .max(12,'Invalid')
            .required(REQUIRED_FIELD),
        cvc: yup
            .number()
            .required(REQUIRED_FIELD),

    });

这工作正常，只要我使用 Yup 方法，但是，我使用的信用卡服务提供了自己的验证功能，例如来自外部脚本的“Provider.validateCardNumber”。

我似乎无法弄清楚在哪里以及如何添加自定义验证，以便我可以继续对其他字段使用 Yup 验证，但我的外部库方法用于自定义验证 cvc 和信用卡号。

有没有办法在我的 yup 模式中添加自定义回调函数并返回函数的值，例如我的 Provider.validateCardNumber是的，所以我不需要更改我的验证功能？如果是这样，我如何访问 values在模式中，它们被传递给验证函数......

或者

我应该如何修改我的验证函数，以便它运行 Yup 模式验证和外部脚本验证，所以最后它返回一个空对象给 react-final-form 的验证 Prop

换句话说，我想运行一个外部方法作为我验证的一部分，但如果可能，继续使用 Yup 模式。

Answer 1

答案在 Yup 文档及其方法中 test()所以最后我只需要扩展架构并使用测试方法来传递外部真/假测试

number: yup
            .string()
            .test('Card Test',
                'Invalid Card Number',
                value=>Provider.validateNumber(value)
            )