如何更新正则实现带两位小数与千分位的货币格式？

要实现符合要求的NumberField组件格式化逻辑，不能仅依赖单一正则替换，需要结合输入合法性校验和分部分格式化来完成，具体方案如下：

1. 先做输入合法性校验（拒绝错误格式） #

在格式化前先过滤掉非法输入，确保仅处理符合规则的数值：

• 仅允许数字和最多一个小数点
• 小数点后最多保留两位数字
• 禁止出现多个小数点（如123.45.678）或小数点后超过两位（如123.5555）

校验正则示例：

const isValidInput = (value) => {
  const cleanedValue = value.replace(/,/g, '');
  return /^(\d+)(\.\d{1,2})?$/.test(cleanedValue);
};

2. 修改convertNumberToString格式化逻辑 #

将数值拆分为整数部分和小数部分分别处理，确保整数部分千分位分隔、小数部分固定两位：

const convertNumberToString = (num) => {
  // 处理非法数值
  if (isNaN(num)) return '';

  // 拆分整数与小数部分
  const [integerPart, decimalPart = ''] = num.toString().split('.');
  
  // 整数部分添加千分位逗号（复用原正则逻辑，仅针对整数部分）
  const formattedInteger = integerPart.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
  
  // 小数部分固定两位：不足补零，超过则截断（如需四舍五入可先用toFixed(2)处理）
  const formattedDecimal = decimalPart.padEnd(2, '0').slice(0, 2);

  // 拼接结果，无小数时仅返回整数部分
  return formattedDecimal ? `${formattedInteger}.${formattedDecimal}` : formattedInteger;
};

3. 优化convertStringToNumber转换逻辑 #

除了移除逗号，还要校验输入格式，避免非法字符串转为无效数字：

const convertStringToNumber = (str) => {
  const cleanedStr = str.replace(/,/g, '');
  
  // 格式不合法时返回NaN，便于组件处理错误状态
  if (!/^(\d+)(\.\d{1,2})?$/.test(cleanedStr)) {
    return NaN;
  }

  return parseFloat(cleanedStr);
};

补充说明 #

• 若需支持负数，可在校验正则和格式化逻辑中添加负号处理，比如将校验正则改为/^-?(\d+)(\.\d{1,2})?$/
• 如需对小数进行四舍五入，可在格式化前先对数值做num = Math.round(num * 100) / 100处理

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