reactjs - 使用 Formik 对范围进行反应 js 验证（字段的最大值和最小值）

Question

我正在尝试使用 React 和 Formik 进行验证。我想实现最大数字仅为 3，最大范围应仅为 100，最小值应为 1。

我如何在 React js 中实现这一点。

Answer 1

您可以通过向其传递验证函数来使用 Field 组件的 validate 属性。

import React from "react";
import ReactDOM from "react-dom";
import { Formik, Field, Form } from "formik";

function validate(value) {
  let error;
  if (value.length > 3) {
    error = "max digits 3";
  } else if (parseInt(value) > 100 || parseInt(value) < 1) {
    error = "range is 1 to 100";
  }
  return error;
}
const Basic = () => (
  <div>
    <Formik
      initialValues={{
        num: ""
      }}
      onSubmit={(values) => {
        // same shape as initial values
        console.log(values);
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <Field type="number" name="num" validate={validate} />
          {errors.num && touched.num && (
            <div style={{ color: "red" }}>{errors.num}</div>
          )}
        </Form>
      )}
    </Formik>
  </div>
);

ReactDOM.render(<Basic />, document.getElementById("root"));

Answer 2

有许多可用的表单模式验证库，其中一个更简单的是Yup.

查看本指南，了解如何将 yup 与 formik 一起使用