如何在Yup中添加自定义日期验证错误消息并设置失焦触发

自定义友好错误消息 #

首先在Yup验证规则中使用.typeError()替换默认的冗长错误提示：

const validationSchema = Yup.object().shape({
  deceased: Yup.date().typeError('请输入格式为yyyy-mm-dd的有效日期'),
});

调整验证触发时机 #

默认Formik会在输入字符时（onChange阶段）触发验证，导致每输入一个字符就弹出错误提示。要实现仅在字段失焦时验证，有两种可选方案：

方案1：全局关闭实时验证（影响所有字段） #

在Formik组件上设置validateOnChange={false}，仅保留失焦和提交时的验证逻辑：

<Formik
  initialValues={{ deceased: '' }}
  validationSchema={validationSchema}
  validateOnChange={false}
  onSubmit={(values) => {
    // 处理表单提交逻辑
  }}
>
  {(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"
        />
      </div>
      {/* 其他表单元素 */}
    </Form>
  )}
</Formik>

方案2：仅针对日期字段关闭实时验证 #

如果其他字段需要保留实时验证，直接在目标Field组件上单独设置validateOnChange={false}：

<Field
  autoComplete="off"
  id="inputCreateMember"
  name="deceased"
  placeholder="yyyy-mm-dd"
  validateOnChange={false}
/>

设置完成后，用户输入日期过程中不会触发验证，只有当字段失焦时，才会校验格式并显示自定义的友好提示。

内容的提问来源于stack exchange，提问作者Jess