使用TypeScript进行表单验证

3bygqnnd 于 2023-10-22 发布在 TypeScript

关注(0)|答案(1)|浏览(126)

我有一个可以创建或编辑对象的表单。每个属性都是必需的，因此如果没有有效的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），但这会重复我在应用程序中的表单中使用的所有类型。
我正在寻找一种方法来写一个验证函数，做同样的事情，用这种类型，没有错误。
我的问题有解决的办法吗？

typescript

来源：https://stackoverflow.com/questions/77302939/yup-validation-in-form-with-typescript

1条答案

按热度按时间

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。

赞(0）回复(0）举报 2023-10-22

我来回答

使用TypeScript进行表单验证

1条答案

相关问题

热门标签

最新问答