提交 Formik 后检查必填字段

在表单提交之前检查必填字段的完整性非常重要，以确保用户输入的数据完整且符合要求。在使用 Formik 管理表单时，可以使用 validate 函数检查表单字段的正确性。

Formik 的 validate 函数

当表单提交或字段值更改时，Formik 将自动调用 validate 函数。该函数将接收表单值对象作为参数，并返回一个包含字段错误信息的对象。如果表单有效，则返回一个空对象。

const validate = (values) => {
  const errors = {};

  // 检查必填字段
  if (!values.name) {
    errors.name = "请填写姓名";
  }
  if (!values.email) {
    errors.email = "请填写邮件地址";
  }

  return errors;
};

const MyForm = () => (
  <Formik initialValues={{ name: "", email: "" }} validate={validate}>
    {/* 表单组件 */}
  </Formik>
);

提示错误信息

在 MyForm 组件中，当提交表单时，Formik 将自动显示错误信息。可以使用 errors 对象来提示错误信息。

const MyForm = () => (
  <Formik initialValues={{ name: "", email: "" }} validate={validate}>
    {({ errors, touched }) => (
      <Form>
        <label>姓名：</label>
        <Field type="text" name="name" />
        {errors.name && touched.name ? <div>{errors.name}</div> : null}

        <label>邮件地址：</label>
        <Field type="email" name="email" />
        {errors.email && touched.email ? <div>{errors.email}</div> : null}

        <button type="submit">提交</button>
      </Form>
    )}
  </Formik>
);

在上面的示例中，如果 errors 对象中的 name 或 email 属性不为空且已被 touched（已被用户操作）则会显示错误信息。

总结

通过使用 Formik 的 validate 函数来检查必填字段，可以轻松确保表单数据的完整性和正确性。同时，使用 errors 对象来提示错误信息也可以提高用户体验。