Javascript 使用Joi和/或Yup进行模式验证，如果存在任何其他属性，是否有方法生成所需的属性集合？

以收集个人详细信息的HTML表单为例

注意：代码片段被简化，与截图不完全匹配。此外，代码片段是使用Yup编写的，Yup是一个非常类似于Joi的库，它以浏览器而不是NodeJ为目标

为了提交表单，我希望对地址字段运行验证并使其成为必需的，但前提是用户已经部分填写了地址部分。总的来说，我想让地址细节成为可选的

这是我的个人模式的简化版本

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()
    })
})

---

我需要相同的可选地址检查：与其根据每个其他地址字段检查每个字段，不如在表单/模式中设置一个名为“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()
  }),
})

---

我需要相同的可选地址检查：与其根据每个其他地址字段检查每个字段，不如在表单/模式中设置一个名为“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()
  }),
})