ReactJS中如何验证数字类型输入框的±符号并限制符号输入？

嘿，这个问题我之前也遇到过——原生type="number"输入框的默认行为确实会允许+和-符号，这在很多只需要非负数字的场景里挺闹心的。下面给你几个React里实用的解决办法，按需选择：

1. 实时拦截非法输入（彻底不让用户输入±） #

这种方法最直接，通过过滤输入内容，让用户根本没法输入+、-这类符号，还能保留数字输入的体验。我们可以把输入框类型改成text，再用正则过滤内容：

import { useState } from 'react';

function NumberInput() {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    // 只保留数字和最多一个小数点（如果需要支持小数的话）
    let filteredValue = e.target.value.replace(/[^0-9.]/g, '');
    // 防止出现多个小数点
    filteredValue = filteredValue.replace(/(\..*)\./g, '$1');
    setValue(filteredValue);
  };

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
      placeholder="请输入数字"
    />
  );
}

如果只需要正整数，把正则改成/[^0-9]/g就行，连小数点也过滤掉。

2. 保留type="number"特性，同时拦截± #

如果你想保留type="number"带来的原生特性（比如移动端弹出数字键盘），可以通过按键拦截和内容过滤双重保障：

import { useState } from 'react';

function RestrictedNumberInput() {
  const [value, setValue] = useState('');

  const handleKeyDown = (e) => {
    // 直接阻止+和-的按键事件
    if (e.key === '+' || e.key === '-') {
      e.preventDefault();
    }
  };

  const handleChange = (e) => {
    // 过滤掉粘贴进来的±符号（防止用户复制粘贴）
    const filteredValue = e.target.value.replace(/[+-]/g, '');
    setValue(filteredValue);
  };

  return (
    <input
      type="number"
      value={value}
      onChange={handleChange}
      onKeyDown={handleKeyDown}
      placeholder="请输入数字"
    />
  );
}

3. 表单提交时的兜底验证 #

不管前面做了什么限制，表单提交前都建议加一层兜底验证，确保最终值完全符合要求：

function FormComponent() {
  const [value, setValue] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // 验证规则：非负整数或小数（可根据需求调整）
    const validNumberRegex = /^\d+(\.\d+)?$/;
    if (!validNumberRegex.test(value)) {
      setError('请输入有效的数字，不能包含±符号');
      return;
    }
    // 验证通过，执行提交逻辑
    console.log('提交的合法数字:', value);
    setError('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="number"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === '+' || e.key === '-') e.preventDefault();
        }}
      />
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button type="submit">提交</button>
    </form>
  );
}

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