我如何用 Yup 验证两个小时？

Question

我使用 Yup 在 React Native 上为我的 Formik 表单创建了一个验证模式。有两个字段（start_time 和 end_time），我想比较 start_time 是否在 end_time 之后并向用户抛出消息。

我阅读了有关 mixed.when 的内容，并试图找出解决方案，但我受阻了。

const isSameOrAfterTime = (startTime, endTime) =>
  moment(startTime, HOUR_MINUTE_SECONDS_MASK).isSameOrAfter(endTime);

// example - data
// start_time: 08:00:25
// end_time: 10:23:42

start_time: Yup.string().when(['start_time', 'end_time'], {
    is: (startTime, endTime) => isSameOrAfterTime(startTime, endTime),
    then: Yup.string() // ???
    otherwise: // ????
  }),

我想在 start_time 在 end_time

之后抛出一条消息

Answer 1

改用yup.test。

https://github.com/jquense/yup#mixedtestname-string-message-string--function-test-function-schema


const SignupSchema = Yup.object().shape({
  // (end_time, screma, self)
  start_time: Yup.string()
  .test(
    'not empty',
    'Start time cant be empty',
    function(value) {
      return !!value;
    }
  )
  .test(
    "start_time_test",
    "Start time must be before end time",
    function(value) {
      const { end_time } = this.parent;
      return isSameOrBefore(value, end_time);
    }
  ),
  end_time: Yup.string()
});

const isSameOrBefore = (startTime, endTime) => {
  return moment(startTime, 'HH:mm').isSameOrBefore(moment(endTime, 'HH:mm'));
}

https://codesandbox.io/s/awesome-johnson-vdueg

我如何用 Yup 验证两个小时？

How can i validate two hours with Yup?

javascript

validation

react-native

yup

formik