尝试通过验证制作 Formik 多步骤。 如何验证字段？

Question

我正在尝试在表单中进行字段验证。 问题是我做了一个多步表单，我的方法是我创建了一个组件数组，我根据 pages[state] 使用它们，但我不知道如何向它发送 props。 我想验证该字段只取两位数，如果没有则显示错误消息

const SignUp = () => {
  const state = useSelector((state: RootState) => state);
  console.log("state", state);

  const dispatch = useDispatch();
  return (
    <Formik
      initialValues={{ firstName: "", lastName: "", email: "" }}
      onSubmit={values => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
        }, 500);
      }}
      render={({ errors, touched, isValidating }) => (
        <Form>
          <div>{pages[state]}</div>
          <button
            type="button"
            onClick={() => {
              dispatch(decrement());
            }}
          >
            Prev
          </button>
          <button
            type="button"
            onClick={() => {
              pages.length - 1 <= state
                ? console.log("No more pages")
                : dispatch(increment());
            }}
          >
            Next
          </button>
        </Form>
      )}
    />
  );
};

const Page2 = () => {
  return (
    <>
      <h1>
        What is your <span id="idealWeightText">ideal weight</span> that you
        want to reach?
      </h1>
      <Input
        name={"firstName"}
        htmlFor={"firstName"}
        type={"number"}
        validation={validateKilograms}
      />
    </>
  );
};

const Input: React.FC<FieldProps> = ({
  name,
  onChange,
  htmlFor,
  type,
  validation,
  placeholder
}) => {
  return (
    <>
      <label htmlFor={name}>
        <Field
          type={type}
          name={name}
          placeholder={placeholder}
          validate={validation}
          onChange={onChange}
        />
        kg
      </label>
    </>
  );
};

Answer 1

有一个名为 Yup 的库，您可以使用它，您将可以自由设置条件验证。

是的，最适合使用 formik 进行验证。

在每一步之后您可以启用一个标志并相应地设置验证。

另外我建议你使用withFormik。 而不是 formik ，因为在那里你可以制作一个单独的文件进行验证并可以给出它的路径。 因此，这也将改善您的文件夹结构。