使用TypeScript进行表单验证

3bygqnnd  于 2023-10-22  发布在  TypeScript
关注(0)|答案(1)|浏览(125)

我有一个可以创建或编辑对象的表单。每个属性都是必需的,因此如果没有有效的A和B,就无法创建/保存对象。我使用的是Yup和TypeScript的最新版本。

interface Exemple{
  A: number;
  B: number;
}

要做到这一点,我有两个数字输入,可以返回一个数字或NaN,如果空或无效的数字。我做了一个验证函数,然后我可以用addMethod添加到yup:

export function validateExemple(): Yup.ObjectSchema<Exemple> {
  return Yup.object<Exemple>().shape({
    A: Yup.number()
      .transform((value) => (isNaN(value) ? undefined : value))
      .required()
      .max(20)
      .min(-20),
    B: Yup.number()
      .transform((value) => (isNaN(value) ? undefined : value))
      .required()
      .max(30)
      .min(-30),
  });
}

我需要将Nan值转换为undefined,以避免min/max异常。这个函数像预期的那样工作,尽管有类型错误:

Type 'ObjectSchema<{ A: number | undefined; B: number | undefined; }, Exemple, { A: undefined; B: undefined; }, "">' is not assignable to type 'ObjectSchema<Exemple, AnyObject, any, "">'.

我的问题是,我不想将基本类型更改为number| undefined是因为除非我不是A和B的形式,否则A和B不可能是undefined。我考虑过使用两种不同的类型(Exemple和ExempleForm),但这会重复我在应用程序中的表单中使用的所有类型。
我正在寻找一种方法来写一个验证函数,做同样的事情,用这种类型,没有错误。
我的问题有解决的办法吗?

vh0rcniy

vh0rcniy1#

你可以这样尝试:

export function validateExemple(): Yup.ObjectSchema<Exemple> {
  const numberSchema = Yup.number()
                          .nullable()
                          .transform((value) => (isNaN(value) ? null : value));
                                return Yup.object<Exemple>().shape({
                                   A: numberSchema.required().max(20).min(-20),
                                   B: numberSchema.required().max(30).min(-30),
                                });
  }

正如你在这里看到的,你可以在Yup中使用nullable方法,而不是undefined

相关问题