Question

我怎样才能验证 yup 中对象内部的对象？

2020-03-03

23640

reactjs formik yup

我使用 formik 和 yup 来处理我的表单，我需要验证 formik 在初始值中设置的两个对象：

initialValues: {
  company: { company_name: '', cnpj: '', fantasy_name: '', state_registration: '' },
  user: { email: '', password: '' }
},
validationSchema: schema,

因此，这是我的验证 yup 架构：

  const schema = Yup.object().shape({
    company_name: Yup.string().required('Informe o nome da filial!'),
    cnpj: Yup.string().required('Informe o cnpj!'),
    email: Yup.string().email('Email não possui formato válido').required('Informe o e-mail'),
    password: Yup.string().required('Informe a senha')
  })

我如何再增加一个级别（用户/公司）？我尝试了类似方法：

company.company_name: Yup.string().required('Informe o nome da filial!')

但我收到：

Parsing error: Unexpected token, expected ","

我该怎么做？

我也尝试了：

  const schema = Yup.object().shape({
    company: Yup.object().shape({
      company_name: Yup.string().required('Informe o nome da filial!'),
      cnpj: Yup.string().required('Informe o cnpj!'),
    }),
    user: Yup.object().shape({
      email: Yup.string().email('Email não possui formato válido').required('Informe o e-mail'),
      password: Yup.string().required('Informe a senha')
    })
  })

但我收到：

TypeError: Cannot read property 'company_name' of undefined

我的模板组件：

<TextField
          value={formik.values.company.company_name}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur} 
          helperText={formik.touched.company.company_name ? formik.errors.company.company_name : ""}
          error={formik.touched.company && Boolean(formik.errors.company)}
          variant="outlined"
          margin="normal"
          required
          fullWidth
          id="company_name"
          label="Razão social"
          name="company_name"
        />

Answer 1

我认为您可以继续像这样嵌套 -

const schema = Yup.object().shape({
  company: Yup.object().shape({
    company_name: Yup.string.required(),
    // etc
  }),
  user: Yup.object().shape({
    email: Yup.string.required(),
    password: Yup.string.required(),
  }),
});

您收到该错误是因为 company.company_name 不是有效键。如果您确实想做这样的事情，您必须使用计算键：

['company.company_name']: 'Company Name'

Answer 2

尝试使用这种方法，它对我有用：

const schema = yup.object({
    company: yup.object({
        company_name: yup.string().required('Informe o nome da filial!'),
        cnpj: yup.string().required('Informe o cnpj!'),
    }),
    user: yup.object({
        email: yup.string().email('Email não possui formato válido').required('Informe o e-mail'),
        password: yup.string().required('Informe a senha')
    })
});



<TextField required fullWidth variant="outlined" margin="normal"
  id="company_name"
  label="Razão social"
  name="company.company_name"
  value={formik.values.company.company_name}
  onChange={formik.handleChange}
  onBlur={formik.handleBlur}
  helperText={formik.touched.company?.company_name && formik.errors.company?.company_name}
  error={formik.touched.company?.company_name && Boolean(formik.errors.company?.company_name)}

/>

Answer 3

其工作方式如下：

    const schema = Yup.object().shape({
    company: Yup.object().shape({
      company_name: Yup.string().required('Informe o nome da filial!'),
      cnpj: Yup.string().required('Informe o cnpj!'),
    }),
    user: Yup.object().shape({
      email: Yup.string().email('Email não possui formato válido').required('Informe o e-mail'),
      password: Yup.string().required('Informe a senha')
    })
  })

然后在您的文本字段组件上

<TextField
      value={formik.values.company.company_name}
      onChange={formik.handleChange}
      onBlur={formik.handleBlur} 
      helperText={formik.touched.company.company_name ? formik.errors.company.company_name : ""}
      error={formik.touched.company && Boolean(formik.errors.company)}
      variant="outlined"
      margin="normal"
      required
      fullWidth
      id="company.company_name"
      label="Razão social"
      name="company.company_name"
    />