如何查询Yup Schema以识别表单中的必填字段？

完全可行，Yup内置了API可以直接访问schema的约束规则，下面是几种实用的实现方式：

方法1：遍历Schema字段并检查必填约束 #

Yup的object类型schema自带fields属性，包含所有字段的子schema实例。我们可以通过isRequired()方法直接判断字段是否设置了必填规则：

const schema = yup.object({
  example: yup.string(),
  exampleRequired: yup.string().required(),
});

// 提取所有必填字段名
const getRequiredFields = (schema) => {
  const requiredFields = [];
  Object.entries(schema.fields).forEach(([fieldName, fieldSchema]) => {
    if (fieldSchema.isRequired()) {
      requiredFields.push(fieldName);
    }
  });
  return requiredFields;
};

// 使用示例
const requiredFields = getRequiredFields(schema);
console.log(requiredFields); // 输出: ['exampleRequired']

方法2：利用describe()方法获取结构化元数据 #

Yup的describe()方法会返回schema的完整描述对象，其中每个字段的required属性直接标记了是否必填：

const schema = yup.object({
  example: yup.string(),
  exampleRequired: yup.string().required(),
});

// 获取schema的结构化描述
const schemaDesc = schema.describe();

// 过滤出必填字段
const requiredFields = Object.entries(schemaDesc.fields)
  .filter(([_, fieldInfo]) => fieldInfo.required)
  .map(([fieldName]) => fieldName);

console.log(requiredFields); // 输出: ['exampleRequired']

表单渲染中的实际应用 #

拿到必填字段列表后，你可以在渲染Material UI组件时，动态设置required属性或添加必填标记：

import { TextField } from '@mui/material';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';

const DynamicForm = ({ schema }) => {
  const { register } = useForm({
    resolver: yupResolver(schema),
  });

  // 提前获取必填字段
  const requiredFields = Object.entries(schema.fields)
    .filter(([_, fieldSchema]) => fieldSchema.isRequired())
    .map(([name]) => name);

  return (
    <div>
      {Object.keys(schema.fields).map((fieldName) => (
        <TextField
          key={fieldName}
          label={requiredFields.includes(fieldName) ? `${fieldName} *` : fieldName}
          {...register(fieldName)}
          required={requiredFields.includes(fieldName)}
          margin="normal"
          fullWidth
        />
      ))}
    </div>
  );
};

注意事项 #

• 若schema包含嵌套对象，需要递归遍历子schema的fields属性来提取嵌套字段的必填状态
• 动态生成的schema需确保在结构稳定后再调用上述方法，避免获取到不完整的字段信息

内容的提问来源于stack exchange，提问作者jordiburgos