使用 Formik 和 Yup 实现 React 表单多重错误信息展示

import * as Yup from 'yup';
import { useFormik } from 'formik';

const validationSchema = Yup.object({
  email: Yup.string().required("Required field").email("Invalid email format"),
  password: Yup.string()
    .required("Required field password")
    .test({
      test: (value) => {
        let errors = [];

        if (!/^(?=.{8,})/.test(value)) {
          errors.push("Must Contain 8 Characters");
        }

        if (!/^(?=.*[!@#\$%\^&\*])/.test(value)) {
          errors.push("One Special Case Character");
        }

        if (!/^(?=.*[0-9])/.test(value)) {
          errors.push("One Number");
        }

        if (!/^(?=.*[a-z])/.test(value)) {
          errors.push("One Lowercase");
        }

        if (!/^(?=.*[A-Z])/.test(value)) {
          errors.push("One Uppercase");
        }

        if (errors.length > 0) {
          throw new Yup.ValidationError({
            errors: errors,
            inner: true,
            path: "password",
            message: errors,
            value: value,
            name: "ValidationError",
          });
        }

        return true;
      },
    }),
});

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      email: '',
      password: '',
    },
    validationSchema: validationSchema,
    onSubmit: (values) => {
      alert(JSON.stringify(values));
    },
  });

  const { errors, touched, getFieldProps } = formik;

  return (
    <form onSubmit={formik.handleSubmit}>
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="email"
          {...getFieldProps('email')}
        />
        {touched.email && errors.email ? (
          <div>{errors.email}</div>
        ) : null}
      </div>

      <div>
        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          {...getFieldProps('password')}
        />
        {touched.password && errors.password ? (
          <div>
            {Array.isArray(errors.password) ? (
              errors.password.map((error, index) => (
                <div key={index}>{error}</div>
              ))
            ) : (
              <div>{errors.password}</div>
            )}
          </div>
        ) : null}
      </div>

      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;