如何在Yup中命名嵌套结构的表单输入以实现验证？

你的问题核心在于Yup Schema的定义逻辑——不能把"user.first_name"作为顶级字段，而是要按照嵌套对象的层级结构来编写验证规则，才能和表单中name="user.first_name"的输入项匹配。

正确的Yup Schema写法 #

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  // 定义嵌套的user对象，对应表单中的user层级
  user: Yup.object().shape({
    first_name: Yup.string()
      .required('用户名不能为空')
      .min(2, '用户名长度不能少于2位'),
    // 可添加user下其他字段的验证规则，比如last_name
  }),
  // 其他顶级表单字段的验证规则
});

表单组件与验证的关联 #

保持Input组件的name属性为"user.first_name"不变，同时确保表单状态是嵌套结构（比如{ user: { first_name: '' } }），而非扁平化结构。

如果使用Formik这类常用表单库，它会自动解析点分隔的name属性，将值映射到嵌套状态中，验证时也会自动匹配Yup的嵌套Schema：

<Formik
  initialValues={{
    user: {
      first_name: '',
    },
  }}
  validationSchema={validationSchema}
  onSubmit={(values) => {
    // 提交的values会是 { user: { first_name: 'xxx' } }，满足后端接收格式
    console.log(values);
  }}
>
  {({ errors, touched }) => (
    <Form>
      <Input
        name="user.first_name"
        placeholder="请输入用户名"
      />
      {/* 显示错误提示 */}
      {errors.user?.first_name && touched.user?.first_name && (
        <span className="error-text">{errors.user.first_name}</span>
      )}
      <button type="submit">提交</button>
    </Form>
  )}
</Formik>

如果是手动处理表单验证，需确保传给Yup的表单值是嵌套对象结构：

const formValues = {
  user: {
    first_name: document.querySelector('input[name="user.first_name"]').value,
  },
};

// 执行验证
validationSchema.validate(formValues)
  .then(() => {
    // 验证通过，执行提交逻辑
  })
  .catch((error) => {
    // 处理错误，比如通过error.inner[0].message获取具体提示
    console.error(error.message);
  });

关键注意事项 #

• 错误信息需按嵌套结构获取：errors.user.first_name，而非errors['user.first_name']，Yup会生成与Schema结构一致的错误对象。
• 表单初始值的结构必须和Schema完全匹配，否则可能导致验证逻辑不触发。

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