Formik数字输入框的范围校验：深入理解与Yup实践

npm install yup
# 或
yarn add yup

import * as Yup from 'yup';

const MyValidationSchema = Yup.object().shape({
  // 假设我们有一个名为 'percentage' 的数字字段
  percentage: Yup.number()
    .typeError('请输入一个有效的数字') // 当输入非数字时显示
    .min(0, '百分比不能小于0')       // 最小值校验，并提供自定义错误信息
    .max(100, '百分比不能大于100')     // 最大值校验，并提供自定义错误信息
    .required('百分比是必填项'),     // 必填校验
  // 如果有其他字段，可以在这里添加它们的验证规则
  // 例如：firstName: Yup.string().required('姓名为必填项'),
});

import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';

// 定义验证Schema
const ItemValidationSchema = Yup.object().shape({
  // 假设我们正在验证一个数组中的某个项，例如 itemsAndServices[index].percentage
  // 为了简化示例，我们直接验证一个名为 'percentage' 的字段
  // 如果是嵌套结构，Yup支持类似 'itemsAndServices[0].percentage' 这样的路径
  percentage: Yup.number()
    .typeError('请输入一个有效的数字')
    .min(0, '百分比不能小于0')
    .max(100, '百分比不能大于100')
    .required('百分比是必填项'),
  itemName: Yup.string().required('项目名称是必填项'),
});

const NumberRangeValidationForm = () => (
  <div style={{ padding: '20px', maxWidth: '400px', margin: 'auto', border: '1px solid #ccc', borderRadius: '8px' }}>
    <h2>数字范围校验示例</h2>
    <Formik
      initialValues={{
        percentage: 50, // 初始值
        itemName: '服务A',
      }}
      validationSchema={ItemValidationSchema} // 传入Yup Schema
      onSubmit={(values, { setSubmitting }) => {
        // 模拟异步提交
        setTimeout(() => {
          alert('提交成功！\n' + JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({ errors, touched, isSubmitting }) => (
        <Form>
          <div style={{ marginBottom: '15px' }}>
            <label htmlFor="itemName" style={{ display: 'block', marginBottom: '5px' }}>项目名称</label>
            <Field name="itemName" type="text" style={{ width: '100%', padding: '8px', boxSizing: 'border-box' }} />
            {errors.itemName && touched.itemName ? (
              <div style={{ color: 'red', fontSize: '0.85em', marginTop: '5px' }}>{errors.itemName}</div>
            ) : null}
          </div>

          <div style={{ marginBottom: '20px' }}>
            <label htmlFor="percentage" style={{ display: 'block', marginBottom: '5px' }}>百分比 (0-100)</label>
            <Field
              name="percentage"
              type="number"
              // 注意：这里的 min/max 属性仍然可以保留，它们可以作为浏览器层面的辅助提示，
              // 但主要的验证逻辑和错误消息由 Yup Schema 和 Formik 处理。
              min="0"
              max="100"
              style={{ width: '100%', padding: '8px', boxSizing: 'border-box' }}
            />
            {/* 显示验证错误信息 */}
            {errors.percentage && touched.percentage ? (
              <div style={{ color: 'red', fontSize: '0.85em', marginTop: '5px' }}>{errors.percentage}</div>
            ) : null}
          </div>

          <button
            type="submit"
            disabled={isSubmitting}
            style={{
              padding: '10px 20px',
              backgroundColor: '#007bff',
              color: 'white',
              border: 'none',
              borderRadius: '5px',
              cursor: 'pointer',
              opacity: isSubmitting ? 0.7 : 1,
            }}
          >
            {isSubmitting ? '提交中...' : '提交'}
          </button>
        </Form>
      )}
    </Formik>
  </div>
);

export default NumberRangeValidationForm;

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

// 在Formik组件内部或外部定义验证函数
const validatePercentage = value => {
  let error;
  if (value === undefined || value === null || value === '') {
    error = '百分比是必填项';
  } else if (isNaN(Number(value))) { // 确保转换为数字进行判断
    error = '请输入一个有效的数字';
  } else if (Number(value) < 0) {
    error = '百分比不能小于0';
  } else if (Number(value) > 100) {
    error = '百分比不能大于100';
  }
  return error;
};

const FieldValidatePropExample = () => (
  <Formik
    initialValues={{ percentage: '' }}
    onSubmit={values => {
      alert(JSON.stringify(values, null, 2));
    }}
  >
    {({ errors, touched }) => (
      <Form>
        <label htmlFor="percentage">百分比 (0-100)</label>
        <