Formik & Yup：如何验证提供的日期是否为 18 岁？

Question

我正在处理一个由 Formik、Yup 和 ReactJS 制作的表单。在日期字段中，我试图验证用户是否年满 18 岁。我在 Formik 中通过了以下作为 validationSchema 参数：

import differenceInYears from "date-fns/differenceInYears";

...

...

...

    dob: Yup.date()

              .nullable()

              .test("dob", "Should be greater than 18", function (value) {

                return differenceInYears(value, new Date()) >= 18;

              }),

formik 输入字段的名称是dob. 但即使我输入 18 岁的有效日期，它也会显示验证错误。那么，如何正确验证它呢？

Answer 1

您需要交换日期参数：differenceInYears(new Date(), new Date(value)) >= 18;如果您检查 date-fns，第一个参数应该是较晚的日期。您还需要将字段值解析为Date.

Answer 2

因此，如果您想在不添加 date-fns 插件的情况下执行此操作并且不想使用 mgic 天数，那么您可以执行类似的操作。dob: Yup.date().nullable()        .test('dob', 'Should be greater than 18', function (value, ctx) {          const dob = new Date(value);          const validDate = new Date();          const valid = validDate.getFullYear() - dob.getFullYear() >= 18;          return !valid ? ctx.createError() : valid;         })        .required('Required'),

Answer 3

我的解决方案：import React from "react";import { Formik, Form, Field } from "formik";import * as Yup from "yup";import s from "./Registration.module.css";const SignupSchema = Yup.object().shape({&nbsp; firstName: Yup.string().required("Required"),&nbsp; lastName: Yup.string().required("Required"),&nbsp; birthdate: Yup.date()&nbsp; &nbsp; .max(new Date(Date.now() - 567648000000), "You must be at least 18 years")&nbsp; &nbsp; .required("Required"),&nbsp; password: Yup.string()&nbsp; &nbsp; .min(4, "Too Short!")&nbsp; &nbsp; .max(50, "Too Long!")&nbsp; &nbsp; .required("Required"),&nbsp; email: Yup.string().email("Invalid email").required("Required"),});export const RegistrationForm = () => (&nbsp; <div className={s.mainLoginForm}>&nbsp; &nbsp; <h1>Sign up</h1>&nbsp; &nbsp; <Formik&nbsp; &nbsp; &nbsp; initialValues={{&nbsp; &nbsp; &nbsp; &nbsp; firstName: "",&nbsp; &nbsp; &nbsp; &nbsp; lastName: "",&nbsp; &nbsp; &nbsp; &nbsp; email: "",&nbsp; &nbsp; &nbsp; &nbsp; password: "",&nbsp; &nbsp; &nbsp; &nbsp; birthdate: "",&nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; validationSchema={SignupSchema}&nbsp; &nbsp; &nbsp; onSubmit={(values) => {&nbsp; &nbsp; &nbsp; &nbsp; // same shape as initial values&nbsp; &nbsp; &nbsp; &nbsp; console.log(values);&nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; {({ errors, touched }) => (&nbsp; &nbsp; &nbsp; &nbsp; <Form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className={s.inputsFlex}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Field&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className={s.regInput}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="email"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="email"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="email"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {errors.email && touched.email ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className={s.formControl}>{errors.email}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ) : null}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Field&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className={s.regInput}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="password"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="password"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="password"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {errors.password && touched.password ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className={s.formControl}>{errors.password}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ) : null}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Field&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className={s.regInput}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="firstName"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="firstName"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {errors.firstName && touched.firstName ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className={s.formControl}>{errors.firstName}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ) : null}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Field&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className={s.regInput}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="lastName"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="lastName"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {errors.lastName && touched.lastName ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className={s.formControl}>{errors.lastName}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ) : null}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Field className={s.regInput} name="birthdate" type="date" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {errors.birthdate && touched.birthdate ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className={s.formControl}>{errors.birthdate}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ) : null}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className={s.regBtn} type="submit">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Sign up&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </Form>&nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; </Formik>&nbsp; </div>);您可以为闰年（闰年）添加 4 天 86 400 000 * 4 = 345 600 000