Как проверить минимальный возраст с помощью yup и moment.js?

Я создал некоторую схему регистрации

 export const registrationSchema = (translate) => Yup.object().shape({
  //... other properties that are validated.
  //       for example username
    username: Yup.string()
    .min(6, translate('validation:common.username.min', { min: 6 }))
    .max(20, translate('validation:common.username.max', { max: 20 }))
    .required(translate('validation:common.username.required')),
     DOB: Yup.lazy(value => {
        console.info('yup', value);
        if (moment().diff(moment(value), 'years') < 18)
          // Here return DOB error somehow
      })
    ...

и до сих пор это работает как шарм. Но теперь мне нужно проверить, не старше ли пользователя 18 лет. Я получаю DateOfBirth из средства выбора даты, и я могу проверить, меньше ли оно 18 с моментом.

if (moment().diff(moment(date),'years) < 18)

и это значение даты, которое я получил при использовании Yup.lazy, но не знаю, как выдать ошибку проверки, если младше 18 лет, чтобы отобразить ее в поле DOB. я даже не знаю, использую ли я правильный метод yup. Я хотел использовать yup.date(). но как получить выбранную дату внутри схемы, чтобы проверить, является ли она допустимым возрастом.

не могли бы вы объяснить, пожалуйста, что означает lazy в YUP, я не могу понять это из документов..

kuka 02.07.2019 12:51
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
3
1
14 679
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете использовать Yup.string следующим образом:

Yup.string().test(
  "DOB",
  "error message",
  value => {
    return moment().diff(moment(value),'years') >= 18;
  }
)

если тестовая функция возвращает true, поля проходят проверку. В противном случае устанавливается ошибка.

Спасибо друг. Я пробовал с .test(), но использовал его совершенно неправильно :) Это работает как шарм. Спасибо

ivica.moke 26.02.2019 22:52

Кроме того, если вы используете обычный function(value) { ... } в 3-м параметре (вместо функции стрелки), у вас есть доступ к специальному контексту this, который позволяет вам делать такие вещи, как возврат пользовательского сообщения об ошибке: return this.createError({ message: 'Your custom message' }); для ситуаций, когда у вас может быть другая ошибка сообщения в зависимости от значения.

Ryan Wheale 30.10.2019 01:42

Yup.string()
.required("DOB is Required")
.test(
  "DOB",
  "Please choose a valid date of birth",
  (date) => moment().diff(moment(date), "years") >= 18
)

Другие вопросы по теме