React输入框允许大于0的正整数正则验证问题求助

架构老林

2026-8-18

解决方案

你当前的正则/[^1-9]/g会过滤掉所有0，导致像20、500这类合法数值被错误处理。要实现允许输入大于0的正整数、不能以0开头的需求，可以通过两步正则处理来解决：

代码修改

import { useState } from 'react';

function App() {
  const [val, setVal] = useState("");
  
  const handleInputChange = (e) => {
    // 过滤所有非数字字符
    let cleanedValue = e.target.value.replace(/[^0-9]/g, '');
    // 移除开头的多余0（仅当后面还有数字时）
    cleanedValue = cleanedValue.replace(/^0+(?=\d)/, '');
    // 单个0直接清空（符合大于0的要求）
    setVal(cleanedValue === '0' ? '' : cleanedValue);
  };

  return (
    <div className="App">
      <input
        value={val}
        onChange={handleInputChange}
        type="text"
        placeholder="请输入正整数"
      />
    </div>
  );
}

export default App;

逻辑说明

过滤非数字字符：/[^0-9]/g移除所有非数字内容，确保输入仅包含0-9。
移除开头多余0：/^0+(?=\d)/是正向预查正则，仅当开头的0后面还有其他数字时，才移除这些前置0。比如输入00123会变成123，输入20则保持不变。
处理单个0：因为需求是大于0的正整数，所以如果最终结果是单个0，直接清空输入框。