如何使用Yup根据条件设置验证架构？格式

Posted 2021-04-13

我正在尝试使用Yup验证数组中的数据。例如，这是我的initialValue：

{name:'',extra:[]}

动态渲染表单字段后，initialValue将变为：

{name:'',extra:[{label:'age',value:'',required:true}]}

我想设置验证方案以仅在'required'为true时验证对象中的'value'。

我使用此数据来模拟情况：

{name:'john',extra:[{label:'age',value:'',required:true}]};

我尝试过的方法：

const validationschema = yup.object().shape({
 name: yup.string().required(),
  extra: yup.lazy((value,index)=>{
    return yup.mixed().required();
  })
})

用户提交时应该有一个错误，因为年龄的“值”为空。我不确定为什么，我无法真正验证“价值”。如何更改验证模式，以便可以验证“值”？

答案

尝试验证：

name: yup.string().required(),
extra: yup.array()
  .of(
   yup.object().shape({
     required: yup.bool(),
     value: yup.object().when('required', {
       is: true,
       then: yup.string().required('Please, select position')
     }),
   })
  )

您应在此处检查字段required。如果它是true，则验证它。