javascript - 如何使用 formik 和 yup 在需要来自另一个字段的值的字段中创建自定义验证

Question

我使用 formik 和 yup 在我的应用程序中处理表单验证。

我有 2 个相互关联的字段，比如说字段“日期”和字段“时间”。

我想在字段“时间”中进行自定义验证，以根据字段“日期”中的值检查一天中的时间是否已经过去

例如，今天是 2021 年 2 月 26 日上午 8 点，因此用户无法选择 8 点以下的时间。

date: string().required('date required'),
time: string()
  .required('time is require')
  .matches(myCustomRegex)

Answer 1

我通过使用.when方法解决它。

date: string().required('date required'),
time: string()
  .required('time is require')
  .matches(myCustomRegex)
  .when('date', {
    .is: data => date && date moment(new Date(),'x').format('DD/MM/YYYY') === moment(new Date(date), 'x').format('DD/MM/YYYY')
    .then: String().test(
      'time',
      'Start Time must not  be less than the current time',
      value => {
        if(value){
          const currentHour = new Date().getHours();
          const currentMinute = new Date().getMinutes();
          const userPickHour = parseInt(value.split(':')[0], 10)
          const userPickMinute = parseInt(value.split(':')[1], 10);
          if(userPickHour < currentHour){
            return false;
          }else if(userPickHour === currentHour && userPickMinute <= currentMinute){
            return false;
          }else {
            return true;
          }
        }
        return true;
      }
    )
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>