如何驗證是否需要 object 屬性？

Question

我有 object 類型，它們具有“翻譯”屬性，其中可以翻譯成不同語言的字段被傳遞到特定的“語言”屬性中，如下面的架構所示。

始終需要英文翻譯，並且語言的 rest 是可選的，我可以通過將.default(undefined)設置為可選語言來實現這一點。

當存在一種語言並且對其內部字段的驗證失敗時，錯誤總是與字段本身相關聯（在這種情況下為“名稱”）。 這種行為是預期的。

我還想實現什么，但我不知道如何在 'translations' 屬性 'en' 不存在時顯示錯誤，並顯示類似'An English translation is required'類的消息。

const categoryTranslationsSchema = object({
    name: string()
        .min(3, 'Must have at least 3 characters.')
        .max(16, 'Cannot be longer than 16 characteres.')
        .required('Must provide a name.')
})

const categorySchema = object({
    slug: string()
        .min(3, 'Must have at least 3 characters.')
        .max(16, 'Cannot be longer than 16 characteres.')
        .lowercase()
        .trim()
        .matches(/^(?![0-9-]+$)(?:[a-z]{2,}-?|[0-9]-?)+(?<!-)$/gm, 'Must start with a letter and can'
            + ' only contain letters, numbers or dashes (no more than one consecutive).')
        .required('The slug is required.'),
    translations: object({
        en: categoryTranslationsSchema,
        es: categoryTranslationsSchema
            .default(undefined),
        de: categoryTranslationsSchema
            .default(undefined)
    })
})

Answer 1

我認為您應該考慮使用自定義語言環境字典。 當驗證測試沒有提供消息時，它允許您自定義 Yup 使用的默認消息。 如果自定義字典中缺少任何消息，則錯誤消息將默認為 Yup 的錯誤消息。 它還提供了多語言支持。 https://github.com/jquense/yup#using-a-custom-locale-dictionary

import { setLocale } from 'yup';

setLocale({
  mixed: {
    default: 'Não é válido',
  },
  number: {
    min: 'Deve ser maior que ${min}',
  },
});

// now use Yup schemas AFTER you defined your custom dictionary
let schema = yup.object().shape({
  name: yup.string(),
  age: yup.number().min(18),
});

schema.validate({ name: 'jimmy', age: 11 }).catch(function (err) {
  err.name; // => 'ValidationError'
  err.errors; // => ['Deve ser maior que 18']
});

如果你不能得到你正在尋找的東西，請嘗試將它與yup.lazy結合起來，它會創建一個在驗證/強制轉換時評估的模式。 這也可以嵌套在您的 object 架構中。https://github.com/jquense/yup#yuplazyvalue-any--schema-lazy

這是您可以做什么的想法：

translations: Yup.lazy(value => {
      switch (typeof value) {
        case 'object':
          return Yup.object(); // schema for object
        case 'string':
          return Yup.string().min(MIN_DESC_LENGTH).max(_MAX_NAME_LENGTH); // schema for string
        default:
          return Yup.mixed(); // here you can decide what is the default
      }
      })

Answer 2

好吧，驗證嵌套 object 時的問題是它們默認為空對象 {}，因此它通過驗證並進入內部驗證。

然后解決方案將所有對象.default(undefined) ，這樣我們就可以向 object 驗證本身添加更多要求，在這種情況下使其成為必需。

所以解決方案就這么簡單：

const categorySchema = object({
    slug: string()
        .min(3, 'Must have at least 3 characters.')
        .max(16, 'Cannot be longer than 16 characteres.')
        .lowercase()
        .trim()
        .matches(/^(?![0-9-]+$)(?:[a-z]{2,}-?|[0-9]-?)+(?<!-)$/gm, 'Must start with a letter and can'
            + ' only contain letters, numbers or dashes (no more than one consecutive).')
        .required('The slug is required.'),
    translations: object({
        en: categoryTranslationsSchema
            .default(undefined)
            .required('An English translation must be provided.'),
        zh: categoryTranslationsSchema
            .default(undefined)
    }).default(undefined)
        .required('Translations must be defined.'),
})