Formik & Yesp：如何验证提供的日期是否为十八岁？

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;

如果检查日期fns文档，第一个参数应该是较晚的日期。

此外，您还需要将字段值解析为Date。

Answer 2

我的解决方案：

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

Answer 3

所以如果你想在不添加日期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'),