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

npm install formik yup

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

const SignupSchema = Yup.object().shape({
  username: Yup.string()
    .required('用户名是必填项')
    .min(3, '用户名至少需要3个字符')
    .max(20, '用户名最多需要20个字符'),
  email: Yup.string()
    .required('邮箱是必填项')
    .email('请输入有效的邮箱地址'),
  password: Yup.string()
    .required('密码是必填项')
    .min(6, '密码至少需要6个字符'),
});

const MyForm = () => {
  return (
    <Formik
      initialValues={{ username: 'JohnDoe', email: 'john@example.com', password: 'password123' }}
      validationSchema={SignupSchema}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <div>
            <label htmlFor="username">用户名</label>
            <Field name="username" />
            <ErrorMessage name="username" component="div" />
          </div>
          <div>
            <label htmlFor="email">邮箱</label>
            <Field name="email" />
            <ErrorMessage name="email" component="div" />
          </div>
          <div>
            <label htmlFor="password">密码</label>
            <Field name="password" type="password" />
            <ErrorMessage name="password" component="div" />
          </div>
          <button type="submit">提交</button>
        </Form>
      )}
    </Formik>
  );
};

export default MyForm;