多个字段上的formik验证

Formik 是一个流行的 React 库，用于处理表单的状态管理和验证。它允许开发者通过声明式的方式定义表单字段及其验证规则，从而简化了表单处理的复杂性。当涉及到多个字段的验证时，Formik 提供了几种机制来实现这一点。

基础概念

Formik 验证：

Yup: Formik 通常与 Yup 结合使用，Yup 是一个强大的对象模式验证库，用于定义验证模式。
validate prop: 可以传递一个函数给 Formik 组件，该函数接收整个表单的值并返回错误对象。
validateOnChange 和 validateOnBlur: 控制何时触发验证。

类型

同步验证: 验证逻辑立即执行。
异步验证: 可以用于检查用户名是否唯一等需要网络请求的场景。

应用场景

注册和登录表单: 需要验证用户输入的邮箱、密码等信息。
搜索和过滤表单: 用户输入时即时验证输入的有效性。
复杂的数据录入表单: 如财务报告或医疗记录，需要多字段间的依赖验证。

示例代码

以下是一个使用 Formik 和 Yup 进行多个字段验证的简单示例：

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object({
  firstName: Yup.string()
    .max(15, 'Must be 15 characters or less')
    .required('Required'),
  lastName: Yup.string()
    .max(25, 'Must be 25 characters or less')
    .required('Required'),
  email: Yup.string()
    .email('Invalid email address')
    .required('Required'),
});

const MyForm = () => (
  <Formik
    initialValues={{ firstName: '', lastName: '', email: '' }}
    validationSchema={validationSchema}
    onSubmit={(values, { setSubmitting }) => {
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
        setSubmitting(false);
      }, 400);
    }}
  >
    {({ isSubmitting }) => (
      <Form>
        <Field type="text" name="firstName" />
        <ErrorMessage name="firstName" component="div" />

        <Field type="text" name="lastName" />
        <ErrorMessage name="lastName" component="div" />

        <Field type="email" name="email" />
        <ErrorMessage name="email" component="div" />

        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>
      </Form>
    )}
  </Formik>
);

export default MyForm;

遇到问题及解决方法

问题: 表单提交时，即使字段无效，表单也会提交。

原因: 可能是因为 validateOnChange 或 validateOnBlur 设置为 false，导致在提交前没有进行验证。

解决方法: 确保 validateOnChange 和 validateOnBlur 至少有一个设置为 true，或者在 onSubmit 函数中手动调用 validateForm() 方法。

<Formik
  // ...
  validateOnChange={true}
  validateOnBlur={true}
  // ...
>
  // ...
</Formik>

或者

onSubmit={(values, { setSubmitting, validateForm }) => {
  validateForm().then(errors => {
    if (Object.keys(errors).length === 0) {
      // 表单验证通过，执行提交逻辑
    }
  });
}}

通过这种方式，可以确保在表单提交前，所有的字段都经过了正确的验证。