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之类的函数的值，因此我无需更改我的validate函数？如果是这样，我如何访问架构中的values，该架构已传递给validate函数...

OR

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

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

Answer 1

答案在于Yup文档及其方法test()之内，所以最后我只需要扩展架构并使用测试方法即可通过外部正确/错误测试

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

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

1 个答案: