我有一个用 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 模式。
最佳答案
答案在 Yup 文档及其方法中 test()
所以最后我只需要扩展架构并使用测试方法来传递外部真/假测试
number: yup
.string()
.test('Card Test',
'Invalid Card Number',
value=>Provider.validateNumber(value)
)
关于forms - 使用 yup 和自定义验证验证 react-final-form 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58278500/