使用是的和自定义验证验证反应最终形式表单

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 中的Provider.validateCardNumber，这样我就不需要更改我的验证函数了？ 如果是这样，我如何访问模式中的values，这些被传递给验证函数......

或

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

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

Answer 1

答案就在 Yup 文档及其方法test()所以最后我只需要扩展模式并使用测试方法就可以通过外部真/假测试

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