6

我使用 yup 验证并尝试构建条件验证对象

通常,我使用 redux 表单中的 Field 来处理表单输入值并使用 yup 对其进行验证,但在另一种情况下,我使用 FieldArray 来实现复杂的条件,这是我使用 FieldArray 的代码:

 <form onSubmit={handleSubmit}>
      <FieldArray
          name="session"
          component={RenderSession}
        />
 </form>

这是我在 FieldsArray 中绑定的组件,

export const RenderSession = ({ fields }) => {return (
  {fields.map((member, index) => (
    <div key={index}>
      <Field
        name={`${member}.name`}
        validate={validateProps}
      />
    </div>
    <Button onClick={() => fields.push({})}>
      Add
    </Button>
  </Row>
</>

我想检查验证字段名称的值 = { $ {member} .startTime} 如何使用 yup 请给我一个解决方案,将 yup 与 FieldsArray 或其他任何东西一起使用。在这种不可能的情况下,教我另辟蹊径,欢迎提问,谢谢

4

1 回答 1

6

从 Yup 文档中,您可以根据其架构检查数组的元素,即:

array().of(object().shape({ num: number().max(4) }))

参考:https ://github.com/jquense/yup#arrayoftype-schema-schema

或更合适的例子:

const schema = Yup.object().shape({
  friends: Yup.array()
    .of(
      Yup.object().shape({
        name: Yup.string()
          .min(4, 'too short')
          .required('Required'), // these constraints take precedence
        salary: Yup.string()
          .min(3, 'cmon')
          .required('Required'), // these constraints take precedence
      })
    )
    .required('Must have friends') // these constraints are shown if and only if inner constraints are satisfied
    .min(3, 'Minimum of 3 friends'),
});
于 2019-01-07T15:47:53.180 回答