Formik + Yup表单字符串验证不适用于材料UI TextField +使用Formik或Formik组件

npm install formik yup

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

const validationSchema = Yup.object().shape({
  // 在这里定义表单字段的验证规则
  name: Yup.string().required('姓名是必填项'),
  email: Yup.string().email('请输入有效的电子邮件地址').required('电子邮件是必填项'),
});

const MyForm = () => {
  const initialValues = {
    name: '',
    email: '',
  };

  const handleSubmit = (values) => {
    // 处理表单提交逻辑
    console.log(values);
  };

  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={handleSubmit}
    >
      <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;