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