如何在ReactJS中结合Formik与Material-UI TextField实现有效数字输入验证

你要实现一个仅接受有效数字的输入框，用Formik做表单管理，要求：

• 提交非有效数字时提示「仅允许输入数字」
• 单独输入e/E/+/-必须报错
• 有效输入：+1、-1、1e1；无效输入：e、1-、1+、12e

当前代码的问题：

• 输入为空时不显示错误提示
• 验证正则未覆盖带正号的有效输入，也没拦截单独符号、不完整科学计数法这类无效格式
• onKeyPress里的console.log在return true之后永远不会执行，拦截逻辑存在漏洞

1. 修正验证正则 #

先写出能覆盖所有有效场景、排除无效输入的正则：

const validNumberRegex = /^[+-]?(0|[1-9]\d*)(e[+-]?(0|[1-9]\d*))?$/i;

正则逻辑说明：

• 开头可选+或-符号
• 主体为0或非0开头的数字序列
• 可选科学计数部分：e/E后跟可选的+/-，再跟有效数字
• 完全排除单独的+/-/e/E，以及1-/1+/12e这类不完整格式

2. 整合Formik验证逻辑 #

不要只依赖onKeyPress做输入拦截，Formik的validate函数才是提交验证的核心，同时保留输入拦截提升用户体验。

3. 完整代码实现 #

import { TextField } from '@mui/material'; // 假设使用MUI组件库
import { useFormik } from 'formik';

const validNumberRegex = /^[+-]?(0|[1-9]\d*)(e[+-]?(0|[1-9]\d*))?$/i;

const NumberField = (props) => {
  const { error, helperText, ...restProps } = props;

  // 输入时拦截无效字符，允许退格/删除等控制键
  const handleKeyPress = (e) => {
    const currentValue = e.target.value;
    const newValue = currentValue + e.key;
    if (e.keyCode === 8 || e.keyCode === 46 || validNumberRegex.test(newValue)) {
      return;
    }
    e.preventDefault();
  };

  return (
    <TextField
      fullWidth
      onKeyPress={handleKeyPress}
      helperText={helperText}
      error={error}
      {...restProps}
    />
  );
};

// 带Formik的示例表单
const NumberForm = () => {
  const formik = useFormik({
    initialValues: {
      numberInput: ''
    },
    validate: (values) => {
      const errors = {};
      // 空值、无效数字统一报错
      if (!values.numberInput || !validNumberRegex.test(values.numberInput)) {
        errors.numberInput = '仅允许输入数字';
      }
      return errors;
    },
    onSubmit: (values) => {
      // 提交逻辑
      console.log('有效输入:', values.numberInput);
    }
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <NumberField
        name="numberInput"
        label="数字输入"
        value={formik.values.numberInput}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        error={formik.touched.numberInput && Boolean(formik.errors.numberInput)}
        helperText={formik.touched.numberInput && formik.errors.numberInput}
      />
      <button type="submit">继续</button>
    </form>
  );
};

export default NumberForm;

关键修改说明 #

• 正则修正后支持带正号的有效输入，同时拦截所有无效格式
• 把验证逻辑移到Formik的validate中，确保提交时必做校验，包括空值场景
• onKeyPress优化：允许退格/删除等控制键，同时检查输入后的完整值是否合规，避免用户输入无效字符
• 利用Formik的touched状态，仅在用户触碰过输入框后显示错误，符合常规表单交互逻辑

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