问题描述
我正在使用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岁,它也会显示验证错误。那么,如何正确验证呢?
解决方法
您需要交换日期参数:
differenceInYears(new Date(),new Date(value)) >= 18;
如果您选择date-fns docs,则第一个参数应为较晚的日期。
还需要将字段值解析为Date
。
我的解决方案:
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