使用 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())}
/>

模式是这样定义的 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 架构中添加自定义回调函数，并在 yup 中添加 return 函数的值，例如我的 Provider.validateCardNumber，这样我就不需要更改验证函数？如果是这样，我如何访问传递给验证函数的模式中的 values...

或

我应该如何修改我的验证函数，以便它运行 Yup 模式验证和外部脚本验证，所以最后它 return 是验证道具的空对象反应最终形式

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

Answer 1

答案在 Yup 文档及其方法中 test() 所以最后我只需要扩展模式并使用测试方法能够通过外部 true/false 测试

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

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

Validating a react-final-form form with yup and custom validations

forms

validation

yup

react-final-form