如何用Formik+Yup实现文本输入框仅数字输入及数值验证？

核心思路 #

用text类型输入框规避number输入框的滚动数值变更问题，通过自定义onChange事件过滤非数字字符，再结合Yup的整数验证规则实现需求。

步骤1：输入内容实时过滤 #

在输入框的onChange事件中，用正则表达式过滤掉所有非0-9的字符，确保用户无法输入逗号、小数点或字母，同时将处理后的值同步给Formik：

<input
  type="text"
  name="integerInput"
  value={formik.values.integerInput}
  onChange={(e) => {
    // 只保留数字字符，可额外处理前导零（可选）
    let filteredValue = e.target.value.replace(/[^0-9]/g, '');
    // 移除前导零（除了单个0的情况）
    filteredValue = filteredValue.replace(/^0+(?=[0-9])/, '');
    
    // 同步处理后的值到Formik
    formik.handleChange({
      target: {
        name: e.target.name,
        value: filteredValue
      }
    });
  }}
/>

步骤2：Yup验证规则配置 #

使用Yup.number()配合integer()、min()、max()实现整数范围验证，同时添加typeError处理异常提示：

import * as Yup from 'yup';

const validationSchema = Yup.object({
  integerInput: Yup.number()
    .typeError('请输入有效的整数')
    .integer('只能输入整数')
    .min(1, '数值不能小于1') // 替换为你的最小值
    .max(100, '数值不能大于100') // 替换为你的最大值
    .required('此字段为必填项')
});

步骤3：完整Formik整合示例 #

将输入框和验证规则整合到Formik组件中，完整代码如下：

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

const IntegerInputForm = () => {
  const validationSchema = Yup.object({
    integerInput: Yup.number()
      .typeError('请输入有效的整数')
      .integer('只能输入整数')
      .min(1, '数值不能小于1')
      .max(100, '数值不能大于100')
      .required('此字段为必填项')
  });

  return (
    <Formik
      initialValues={{ integerInput: '' }}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        console.log('提交的整数:', values.integerInput);
        // 执行你的提交逻辑
      }}
    >
      {formik => (
        <Form>
          <div className="form-group">
            <label htmlFor="integerInput">整数输入</label>
            <input
              type="text"
              id="integerInput"
              name="integerInput"
              value={formik.values.integerInput}
              onChange={(e) => {
                let filteredValue = e.target.value.replace(/[^0-9]/g, '');
                filteredValue = filteredValue.replace(/^0+(?=[0-9])/, '');
                formik.handleChange({
                  target: {
                    name: e.target.name,
                    value: filteredValue
                  }
                });
              }}
              className={formik.touched.integerInput && formik.errors.integerInput ? 'invalid' : ''}
            />
            {formik.touched.integerInput && formik.errors.integerInput && (
              <div className="error-message" style={{ color: 'red' }}>
                {formik.errors.integerInput}
              </div>
            )}
          </div>
          <button type="submit" disabled={!formik.isValid}>提交</button>
        </Form>
      )}
    </Formik>
  );
};

export default IntegerInputForm;

方案优势 #

• 彻底避免number输入框滚动时数值意外变更的问题
• 实时过滤非法输入，用户无法输入任何非数字字符
• 结合Yup的验证规则，完美支持min()、max()等数值校验逻辑
• 纯React/Formik实现，无需依赖jQuery

内容的提问来源于stack exchange，提问作者Awesome Bassey