我在Formik表单中有一个日期字段,在Yup验证模式中我将该字段设置为Yup.date()validation,如下所示:
const validationSchema = Yup.object().shape({
deceased: Yup.date(),
此Formik字段返回为:
<Form className="formContainer">
<div className="pb-2">
<label>Deactivate Member Record</label>
<ErrorMessage name="deceased" component="span" className="text-red-500" />
<Field
autoComplete="off"
id="inputCreateMember"
name="deceased"
placeholder="yyyy-mm-dd"
/>
如果日期不是以yyyy-mm-dd格式输入的,它将以以下格式显示验证错误:
[字段名]必须是date
类型,但最终值是从值"[value entered in the form field]"
转换而来的“无效日期”
例如,我输入'20'在日期字段下面的标签'停用会员记录',并得到以下验证错误:
Example of validation error message
我不想让用户看到这个复杂的错误消息,相反,我只想向他们重申,他们需要使用日期格式yyyy-mm-dd。
我知道我可以使用.typeError()自定义错误消息,但这也会导致验证发生多次;每次在字段中输入一个字符时都显示一次。这也不令人满意,我只是希望在用户退出字段时显示验证错误消息,类似于使用.required()验证类型显示自定义错误消息的方式。
1条答案
按热度按时间mzmfm0qo1#
使用React编号格式组件中的PatternFormat功能解析。
代码: