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

Question

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

我有 2 个相互关联的字段，比如说字段 'date' 和字段 'time'。

我想在字段 'time' 中进行自定义验证，以根据字段 'date'

中的值检查一天中的时间是否已过

例如，今天是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>

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

How to create custom validation in a field that need value from another field using formik and yup

javascript

reactjs

yup

formik

formik-material-ui