时间戳

首页 > 解决方案 > 在formik表单上验证yup时使用

reactjs - 在formik表单上验证yup时使用

问题描述

嘿，伙计，我对 2 个表单输入数字 min 和 max 有问题，我希望 max 的值总是大于 min 值，如果不是，使用 yup 来显示错误，但似乎它不起作用，这是我的代码。感谢您的帮助！！

const formikAddFilter = useFormik({
enableReinitialize: true,
initialValues: {
  filterName: '',
  min: 0,
  max: 0,
  unValidRange: max > min 
},
validationSchema: Yup.object().shape({
  unValidRange:Yup.boolean(),
  filterName: Yup.string().required('Skill is required'),
  max:Yup.number().when('unValidRange',{
    is:true,
    then: Yup.number().required('max cant less than min')
  })
}),
onSubmit: values => {
  alert(JSON.stringify(values))
  setFilterItem([...filterItem, values])
  formikAddFilter.setFieldValue('filterName', '')
  formikAddFilter.setFieldValue('min', 0)
  formikAddFilter.setFieldValue('max', 0)
}

});

标签： reactjsvalidationformikyup

解决方案

尝试这个

const validationRange = yup.object().shape({
  min: yup.number().required(),
  max: yup
    .number()
    .required()
    .test('superior', 'min must be smaller than max', function(f) {
      const ref = yup.ref('min');
      return f > this.resolve(ref);
    })
});

演示： Stackblitz

推荐阅读