我有一个使用 Formik 库创建事件的表单。我需要检查开始日期是否与结束日期重叠,反之亦然。我有两个日期选择器来选择日期和时间。如何使用 Yup 来验证这一点并在它们重叠时显示错误消息?
我在这里先向您的帮助表示感谢
const validationSchema = Yup.object().shape({
eventName: Yup.string()
.min(1, "Must have a character")
.max(10, "Must be shorter than 255")
.required("Must enter an event name"),
email: Yup.string()
.email("Must be a valid email address")
.max(255, "Must be shorter than 255")
.required("Must enter an email"),
eventStartDate: Yup.date()
.required("Must enter start date"),
eventEndDate: Yup.date()
.required("Must enter end date")
})
var defaultValue = new Date().toDateString
export default function EventForm(){
return (
<Formik
initialValues={{eventName: "", email: "", }}
validationSchema={validationSchema}
onSubmit={(values, {setSubmitting, resetForm}) => {
setTimeout(() => {
}}
>
{ ({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting
}) => (
<form onSubmit={handleSubmit}>
<div className="input-row">
<TextField
id="eventName"
label="Event Name"
margin="normal"
variant="filled"
onChange={handleChange}
onBlur={handleBlur}
value={values.eventName}
className={touched.eventName && errors.eventName ? "has-error" : null}
/>
<Error touched={touched.eventName} message={errors.eventName}/>
</div>
<div className="dateHolder">
<div className="startDate">
<TextField
id="eventStartDate"
label="Event Start Date"
type="datetime-local"
InputLabelProps={{
shrink: true
}}
format="yyy-dd-mm HH:MM:ss"
onChange={handleChange}
onBlur={handleBlur}
value={values.eventStartDate}
/>
<Error touched={touched.eventStartDate} message={errors.eventStartDate}/>
</div>
<div className="endDate">
<TextField
id="eventEndDate"
label="Event End Date"
type="datetime-local"
InputLabelProps={{
shrink: true
}}
format="yyy-dd-mm HH:MM:ss"
onChange={handleChange}
onBlur={handleBlur}
value={values.eventEndDate}
/>
<Error touched={touched.eventEndDate} message={errors.eventEndDate}/>
</div>
</div>
<div className="input-row">
<button type="submit" disabled={isSubmitting} >
Submit
</button>
</div>
</form>
)}
</Formik>
)
}
use ref
效果很好
yup.object().shape({
startDate: date(),
endDate: date().min(
yup.ref('startDate'),
"end date can't be before start date"
)
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)