Formik在页面加载时验证初始值

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

const initialValues = {
  name: '',
  email: '',
};

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

  if (!values.name) {
    errors.name = '姓名不能为空';
  }

  if (!values.email) {
    errors.email = '邮箱不能为空';
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
    errors.email = '无效的邮箱地址';
  }

  return errors;
};

const MyForm = () => (
  <Formik
    initialValues={initialValues}
    validate={validate}
    onSubmit={(values) => {
      // 处理表单提交逻辑
      console.log(values);
    }}
  >
    <Form>
      <div>
        <label htmlFor="name">姓名：</label>
        <Field type="text" id="name" name="name" />
        <ErrorMessage name="name" component="div" />
      </div>

      <div>
        <label htmlFor="email">邮箱：</label>
        <Field type="email" id="email" name="email" />
        <ErrorMessage name="email" component="div" />
      </div>

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

export default MyForm;