reactjs - 验证 Yup 中的对象项

Question

我正在尝试验证表单输入，例如用户的名字:

const validateForm = () => {
const validationSchema = Yup.object().shape({
  "user.first_name": Yup.string().required("Enter name!"),

我尝试了各种方法...目前我的输入如下

  <Input
          label={"Name"}
          value={updatedTenantData.user.first_name}
          onChange={handleInputChange}
          name="user.first_name"
          error={errors["user.first_name"]}
        />

但是它不起作用。

有谁知道我应该如何用 Yup 命名我的输入？

我不能将其命名为“first_name”，因为值不会按应有的方式发送。

Answer 1

使用 Yup 进行验证时，您应该根据表单数据的嵌套结构在 Yup 中命名输入字段。在您的例子中，输入字段名为“user.first_name”，因此您需要相应地调整验证。

import * as Yup from 'yup';

const validateForm = () => {
  const validationSchema = Yup.object() shape({
    user: Yup.object().shape({
      first_name: Yup.string().required('Enter name!'),
    }),
  });
};