reactjs 如何在Yup中添加自定义日期验证错误消息

htzpubme  于 2023-02-08  发布在  React
关注(0)|答案(1)|浏览(148)

我在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()验证类型显示自定义错误消息的方式。

mzmfm0qo

mzmfm0qo1#

使用React编号格式组件中的PatternFormat功能解析。
代码:

<PatternFormat
      {...field}
      format="####/##/##"
      mask={['Y', 'Y', 'Y', 'Y', 'M', 'M', 'D', 'D']}
      className={formikField}
      placeholder="YYYY/MM/DD"
    />

相关问题