如何使用Formik实现字段验证？

npm install formik

import { Formik } from 'formik';

import * as Yup from 'yup';

const initialValues = {
  username: '',
  password: '',
};

const validationSchema = Yup.object().shape({
  username: Yup.string().required('用户名不能为空'),
  password: Yup.string().required('密码不能为空'),
});

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

<Formik
  initialValues={initialValues}
  validationSchema={validationSchema}
  onSubmit={handleSubmit}
>
  {({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="username"
        value={values.username}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {errors.username && touched.username && <div>{errors.username}</div>}

      <input
        type="password"
        name="password"
        value={values.password}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {errors.password && touched.password && <div>{errors.password}</div>}

      <button type="submit">提交</button>
    </form>
  )}
</Formik>