React中如何实现仅支持输入-99至99的输入框？

原代码的问题核心是对输入格式的校验不严谨，以及特殊场景下数值解析失效：

• 未限制-只能出现一次且仅在开头，导致--99、1-9这类非法格式通过
• parseInt("--99")会返回NaN，直接跳过后续范围判断，让无效内容流入

下面是修正后的验证逻辑，从字符合法性、格式规则、数值范围三个维度做严格校验：

const validateInput = (e) => {
  // 允许方向键、退格键等常用控制键
  const controlKeys = ['ArrowRight', 'ArrowLeft', 'Backspace', 'Delete', 'Tab'];
  if (controlKeys.includes(e.key)) {
    return;
  }

  // 只允许输入数字和-，其他字符直接拦截
  if (!/^[0-9-]$/.test(e.key)) {
    e.preventDefault();
    return;
  }

  const currentValue = e.target.value;
  // 已有负号时，禁止再输入-
  if (e.key === '-' && currentValue.includes('-')) {
    e.preventDefault();
    return;
  }
  // -只能在开头输入，不能在中间插入
  if (e.key === '-' && currentValue.length > 0) {
    e.preventDefault();
    return;
  }

  const newValue = currentValue + e.key;
  // 拦截全0的无效输入（比如连续输入0或-00）
  if (/^0+$/.test(newValue) || /^-0+$/.test(newValue)) {
    e.preventDefault();
    return;
  }

  // 解析数值并验证范围，先排除非法格式导致的NaN
  const num = parseInt(newValue, 10);
  if (!isNaN(num) && num >= -99 && num <= 99) {
    return;
  }

  e.preventDefault();
};

关键优化点： #

• 补充常用控制键的白名单，避免影响正常输入操作
• 直接过滤非数字和-的字符，从源头拦截无效输入
• 严格限制-的出现规则，确保仅作为负号在开头使用
• 提前拦截全0类无效输入
• 先校验数值合法性（非NaN），再做范围判断

内容的提问来源于stack exchange，提问作者Baran Öden