Formik中数字输入字段的最小/最大值验证实践

npm install yup
# 或者
yarn add yup

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  // 定义一个名为 'percentage' 的数字字段
  percentage: Yup.number()
    .min(0, '百分比不能小于0') // 设置最小值及对应的错误信息
    .max(100, '百分比不能大于100') // 设置最大值及对应的错误信息
    .required('百分比是必填项') // 设置为必填项
    .typeError('请输入有效的数字') // 当输入非数字字符时显示此错误
});

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

// 定义 Yup 验证模式
const PercentageValidationSchema = Yup.object().shape({
  percentage: Yup.number()
    .min(0, '百分比不能小于0')
    .max(100, '百分比不能大于100')
    .required('百分比是必填项')
    .typeError('请输入有效的数字')
});

const PercentageInputForm = () => (
  <div>
    <h2>百分比输入字段验证示例</h2>
    <Formik
      initialValues={{
        // 初始值可以是数字或空字符串，根据需求而定
        // 如果设置为0，则初始即为有效值
        // 如果设置为''，则在首次触摸并为空时会显示required错误
        percentage: 0,
      }}
      validationSchema={PercentageValidationSchema} // 传入 Yup 验证模式
      onSubmit={values => {
        // 表单提交逻辑，此时 values.percentage 已经通过验证
        console.log('提交的值:', values);
        alert(`提交成功! 百分比: ${values.percentage}`);
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <label htmlFor="percentage">输入百分比 (0-100):</label>
          <Field
            id="percentage"
            name="percentage"
            type="number"
            // HTML5的min/max属性仍然可以保留，作为浏览器层面的初步提示，
            // 但Formik的验证逻辑将由Yup接管。
            min="0"
            max="100"
            className="form-control" // 示例样式类
            placeholder="请输入0到100的数字"
          />
          {/* 当字段被触摸且存在错误时显示错误信息 */}
          {errors.percentage && touched.percentage ? (
            <div style={{ color: 'red', fontSize: '0.9em', marginTop: '5px' }}>
              {errors.percentage}
            </div>
          ) : null}

          <button type="submit" style={{ marginTop: '20px', padding: '10px 20px' }}>
            提交
          </button>
        </Form>
      )}
    </Formik>
  </div>
);

export default PercentageInputForm;

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

const validatePercentage = (value) => {
  let error;
  if (!value && value !== 0) { // 检查是否为空或未定义
    error = '百分比是必填项';
  } else if (isNaN(value)) { // 检查是否为数字
    error = '请输入有效的数字';
  } else if (value < 0) {
    error = '百分比不能小于0';
  } else if (value > 100) {
    error = '百分比不能大于100';
  }
  return error;
};

const FieldValidatePropExample = () => (
  <div>
    <h2>使用 Field validate Prop 验证</h2>
    <Formik
      initialValues={{ percentage: 0 }}
      onSubmit={values => {
        console.log('提交的值:', values);
        alert(`提交成功! 百分比: ${values.percentage}`);
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <label htmlFor="percentageField">输入百分比 (0-100):</label>
          <Field
            id="percentageField"
            name="percentage"
            type="number"
            validate={validatePercentage} // 传入验证函数
            className="form-control"
            placeholder="请输入0到100的数字"
          />
          {errors.percentage && touched.percentage ? (
            <div style={{ color: 'red', fontSize: '0.9em', marginTop: '5px' }}>
              {errors.percentage}
            </div>
          ) : null}
          <button type="submit" style={{ marginTop: '20px', padding: '10px 20px' }}>
            提交
          </button>
        </Form>
      )}
    </Formik>
  </div>
);

export default FieldValidatePropExample;