如何编写仅允许单个小数点或逗号的正则表达式？

针对你的需求，我们需要调整正则和处理逻辑，确保满足以下要求：

• 禁止开头连续0（单个0后跟分隔符的情况除外，如0.50）
• 仅允许数字、逗号或小数点，且两者不能同时使用
• 禁止连续的逗号或小数点

修改后的处理逻辑 #

替换原handleChange中的处理代码为以下内容：

function handleChange(e) {
  let { name, value } = e.target;

  // 1. 过滤所有非数字、非逗号、非小数点的字符
  value = value.replace(/[^0-9,.]/g, '');

  // 2. 确保逗号和小数点只能保留一种
  const hasDot = value.includes('.');
  const hasComma = value.includes(',');
  if (hasDot && hasComma) {
    // 保留先出现的分隔符，移除后出现的类型
    const firstSepIndex = Math.min(value.indexOf('.'), value.indexOf(','));
    const sepToRemove = value[firstSepIndex] === '.' ? ',' : '.';
    value = value.replace(new RegExp(`\\${sepToRemove}`, 'g'), '');
  }

  // 3. 移除连续重复的分隔符（如,,、..）
  value = value.replace(/([.,])\1+/g, '$1');

  // 4. 处理开头的连续0：
  // - 开头多个0后跟数字时，只保留第一个有效数字（如005 → 5）
  // - 开头多个0后跟分隔符时，保留单个0（如00. → 0.）
  value = value.replace(/^0+(?=\d)/, '');
  value = value.replace(/^0+(?=[.,])/, '0');

  setLendData((prev) => ({
    ...prev,
    [name]: value,
  }));
}

关键逻辑说明 #

1. 非法字符过滤：/[^0-9,.]/g 直接移除所有不在允许范围内的字符。
2. 分隔符二选一：通过判断逗号和小数点的存在情况，保留先出现的分隔符，彻底移除另一种，确保格式统一。
3. 连续分隔符处理：/([.,])\1+/g 匹配连续重复的分隔符，替换为单个分隔符（比如5,,20变成5,20）。
4. 开头连续0修正：
   • ^0+(?=\d) 匹配开头的多个0且后面跟数字的情况，替换为空（如00123→123）
   • ^0+(?=[.,]) 匹配开头的多个0且后面跟分隔符的情况，替换为单个0（如00.50→0.50）

额外注意点 #

你的输入框name属性为fee，但状态对象中的属性是lendFee，需要保持一致，否则状态更新会失效：

<input
  type='text'
  inputMode='decimal'
  name='lendFee' <!-- 修改为对应状态属性名 -->
  id='fee'
  placeholder='0%'
  value={lendData.lendFee}
  onChange={handleChange}
/>

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