基于 select 选项的字段条件验证 - 是的

Question

所以在学习的过程中，我找到了这个包 - yup 用于验证。但是我遇到了一个问题

所以我将解释问题陈述以及我到目前为止所做的尝试。

所以用例是我有一个 select 字段，它有两个选项，居民和非居民，所以基于 selection 我有不同的字段，我渲染

居民 : first_name, last_name
非居民：passport_number，国家，州

所以在这里我想到了拆分模式并基于 selection 我想添加额外的字段模式以进行验证。

const required = () => "Field is required";

const resident_schema = object({
  first_name: string().required(required).nullable(),
  last_name: string().required(required).nullable(),
});

const non_resident_schema = object({
  passport_number: string().required(required).nullable(),
  country: object().required(required).nullable(),
  state: object().required(required).nullable(),
});

const schemaBasedCitizen = {
  RESIDENT: resident_schema,
  NON-RESIDENT: non_resident_schema,
};

export const validationSchema = object().shape({
  citizen: object().required(required).nullable(),
  { ...object().when("citizen", {
    is: (value) => !!schemaBasedCitizen[value.toUpperCase()],
    then: (value) => schemaBasedCitizen[value.toUpperCase()],
  }) },
});

我的html包括

<select>
 <option disabled selected value> -- select an option -- </option>
 <option value='resident'>Resident</option>
 <option value='non-resident'>Non-Resident</option>
</select>

我无法传播，因为密钥需要，所以有没有办法实现。

更新

值驻留在 select 字段中时的架构

export const validationSchema = object().shape({
      citizen: object().required(required).nullable(),
      first_name: string().required(required).nullable(),
      last_name: string().required(required).nullable(),
    });

值非常驻在 select 字段时的模式

export const validationSchema = object().shape({
      citizen: object().required(required).nullable(),
      passport_number: string().required(required).nullable(),
      country: object().required(required).nullable(),
      state: object().required(required).nullable(),
    });

基本上，验证是基于公民 select 字段的值动态进行的。

Answer 1

是的，它只能使用 when.

引用 sibling 字段（或上下文）

您的 citizen 字段不是对象其余部分的兄弟，不能用于有条件地更改对象架构，它是 child对象，因此您不能通过 when.

将其作为兄弟字段引用

完成您想要的事情的一种方法是使用 lazy 架构：

import { lazy } from 'yup';

const residentSchema = ...
const nonResidentSchema = ...

export const validationSchema = lazy(({citizen}) => citizen === 'resident' ? residentSchema : nonResidentSchema);

基于 select 选项的字段条件验证 - 是的

Conditional validation for fields based on select option - yup

javascript

reactjs

yup