在ReactJs中使用Formik库处理form & Yup库

npm install formik yup

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

const SignupForm = () => {
  // 定义表单初始值
  const initialValues = {
    name: '',
    email: '',
    password: '',
  };

  // 定义表单验证规则
  const validationSchema = Yup.object({
    name: Yup.string()
      .min(2, 'Name must be at least 2 characters')
      .required('Name is required'),
    email: Yup.string()
      .email('Invalid email address')
      .required('Email is required'),
    password: Yup.string()
      .min(6, 'Password must be at least 6 characters')
      .required('Password is required'),
  });

  // 定义表单提交处理函数
  const onSubmit = (values, { setSubmitting }) => {
    console.log('Form data', values);
    setTimeout(() => {
      setSubmitting(false);
    }, 500);
  };

  return (
    <div>
      <h1>Signup Form</h1>
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={onSubmit}
      >
        {({ isSubmitting }) => (
          <Form>
            <div>
              <label htmlFor="name">Name</label>
              <Field type="text" id="name" name="name" />
              <ErrorMessage name="name" component="div" />
            </div>

            <div>
              <label htmlFor="email">Email</label>
              <Field type="email" id="email" name="email" />
              <ErrorMessage name="email" component="div" />
            </div>

            <div>
              <label htmlFor="password">Password</label>
              <Field type="password" id="password" name="password" />
              <ErrorMessage name="password" component="div" />
            </div>

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

export default SignupForm;

import React from 'react';
import ReactDOM from 'react-dom';
import SignupForm from './SignupForm';

const App = () => (
  <div>
    <SignupForm />
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));