使用 Formik 对范围字段的最大值和最小值进行 React js 验证

如何解决使用 Formik 对范围字段的最大值和最小值进行 React js 验证

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

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

解决方法

您可以通过向 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"));

,

有许多可用的表单架构验证库，其中一种是 Yup。

Take a look at this guide on how to use yup with formik