使用Joi和/或Yup進行模式驗證，如果存在其他任何屬性，是否可以收集所需的屬性？

Question

例如，收集個人詳細信息的HTML表單。

注意：代碼段已簡化，並且與屏幕截圖不完全匹配。 另外，代碼片段是使用Yup編寫的，Yup是與Joi非常相似的庫，其目標是瀏覽器而不是NodeJS。

為了提交表單，我想在地址字段上運行驗證並使其成為必需，但前提是用戶已經部分填寫了地址部分。 總體而言，我想使地址詳細信息為可選。

這是我的PersonSchema的簡化版本...

import { object, string, number } from 'yup'

const PersonSchema = object().shape({
  name: string().required(),
  age: number()
    .positive()
    .integer()
    .required(),
  address: AddressSchema
})

以這種方式定義AddressSchema不起作用，因為始終需要字段...

const AddressSchema = object().shape({
  street: string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required(),
  city: string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required(),
  state: string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required()
})

這是我嘗試使地址字段依賴於其他地址字段的存在，但這不起作用，因為您遇到了循環依賴問題...

const AddressSchema = object().shape({
  street: string()
    .when(['city', 'state'], {
      is: (city, state) => city || state,
      then: string()
        .min(2, 'Too Short!')
        .max(50, 'Too Long!')
        .required(),
      otherwise: string()
    }),
  city: string()
    .when(['street', 'state'], {
      is: (street, state) => street || state,
      then: string()
        .min(2, 'Too Short!')
        .max(50, 'Too Long!')
        .required(),
      otherwise: string()
    }),
  state: string()
    .when(['street', 'city'], {
      is: (street, city) => street || city,
      then: string()
        .min(2, 'Too Short!')
        .max(50, 'Too Long!')
        .required(),
      otherwise: string()
    })
})

Answer 1

我需要相同的可選地址檢查：與其對照每個其他地址字段檢查每個字段，不如在表單/模式中設置一個名為“ addressStarted”的標志，然后將其用作when觸發器。 在我的情況下，標志是用戶的明確選擇，但也可以很容易地將其作為隱藏值。 只需在每個onChange處理程序中將值切換為true（如果您使用的是Formik之類的東西），或者甚至是包含所有地址字段的元素上的事件偵聽器。

import { object, string, number } from 'yup'

const AddressSchema = object().shape({
  street: string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required(),
  city: string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required(),
  state: string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required()
})

const PersonSchema = object().shape({
  name: string().required(),
  age: number()
    .positive()
    .integer()
    .required(),
  addressStarted: Yup.boolean(),
  address: object().when('addressStarted', {
    is: true,
    then: AddressSchema,
    otherwise: object().notRequired()
  }),
})