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

npm install formik

import React from 'react';
import { Formik, Field, ErrorMessage } from 'formik';

const MyForm = () => {
  return (
    <Formik
      initialValues={{ range: '' }}
      validate={values => {
        const errors = {};
        if (values.range < 0 || values.range > 100) {
          errors.range = '范围必须在0到100之间';
        }
        return errors;
      }}
      onSubmit={values => {
        // 处理表单提交逻辑
        console.log(values);
      }}
    >
      {({ handleSubmit }) => (
        <form onSubmit={handleSubmit}>
          <label htmlFor="range">范围：</label>
          <Field type="number" id="range" name="range" />
          <ErrorMessage name="range" component="div" />
          <button type="submit">提交</button>
        </form>
      )}
    </Formik>
  );
};

export default MyForm;