JavaScript实现数值千分位格式化、保留2位小数及输入位数限制

核心需求 #

• 整数部分自动添加千分位分隔逗号
• 数值最多保留2位小数，展示时不足2位补0，最终格式为带%的百分比形式，参考效果：1.50%、50.00%、99.99%
• 输入时实时拦截非法字符、超长内容，整数位最多支持9位
• 解决原有代码无法适配「整数位+2位小数」长度校验的问题

原有代码问题 #

// Thousand commas (including decimal point)
function numberWithCommas(num) {
  var parts = num.toString().split(".");
  return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
}

//Number + - check (remove all non-numeric + - values) Up to 9 numbers
function chkNumber(obj) {
  var tmpValue = $(obj).val().replace(/[^0-9,^\-]/g, '');
  tmpValue = tmpValue.replace(/[,]/g, '');
  tmpValue = tmpValue.substring(0, 9);
  // Forced value change after processing thousands commas
  obj.value = numberWithCommas(tmpValue);

}
// Remove anything other than numeric values
function chkrealNumber(obj) {
  var tmpValue = $(obj).val().replace(/[^0-9,]/g, '');
  obj.value = tmpValue.replace(/[,]/g, '');
}

• 长度截断逻辑只针对纯整数场景做了9位限制，输入带小数点的内容时，会把小数部分算入截断长度，导致整数位长度不符合预期
• 没有做小数位长度管控，允许输入超过2位的小数
• 没有过滤异常小数点场景（比如连续输入多个小数点、小数点出现在非整数位之后的位置）
• 缺少小数位补0、百分比后缀拼接的逻辑

修复后完整实现 #

// 千分位格式化 + 小数位管控 + 百分比后缀拼接
function numberWithCommas(numStr) {
  const [intPart, decPart = ''] = numStr.split('.');
  // 整数部分加千分位
  const formatInt = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  // 小数部分最多取2位，不足补0
  const formatDec = decPart.padEnd(2, '0').slice(0, 2);
  return `${formatInt}.${formatDec}%`;
}

// 输入实时校验拦截
function chkNumber(obj) {
  let inputVal = $(obj).val();
  // 移除所有非数字、非小数点的非法字符，同时去掉已生成的逗号、百分号避免重复计算
  inputVal = inputVal.replace(/[^0-9.]/g, '');
  // 处理多小数点异常：只保留第一个小数点
  const pointIndex = inputVal.indexOf('.');
  if (pointIndex !== -1) {
    inputVal = inputVal.slice(0, pointIndex + 1) + inputVal.slice(pointIndex + 1).replace(/\./g, '');
  }
  // 拆分整数、小数部分分别做长度限制
  let [intPart = '', decPart = ''] = inputVal.split('.');
  // 整数部分最多9位，超出直接截断
  intPart = intPart.slice(0, 9);
  // 小数部分最多2位，超出直接截断
  decPart = decPart.slice(0, 2);
  // 拼接处理后的合法数值
  const validValue = decPart ? `${intPart}.${decPart}` : intPart;
  // 格式化后回填到输入框
  obj.value = validValue ? numberWithCommas(validValue) : '';
}

// 失焦补全格式：只输入整数时，失焦后自动补全.00%
function handleBlur(obj) {
  const val = $(obj).val().replace(/[,%]/g, '');
  if (!val) return;
  obj.value = numberWithCommas(val.includes('.') ? val : `${val}.`);
}

绑定使用示例 #

给输入框绑定input和blur事件即可生效：

<input type="text" oninput="chkNumber(this)" onblur="handleBlur(this)" placeholder="请输入百分比数值">

注意：输入过程中不强制补0，避免打断用户正常输入节奏，只有输入框失焦时才会自动补全2位小数和%后缀，兼顾输入流畅度和最终格式要求；非法字符、超过9位的整数、超过2位的小数都会在输入时被实时拦截，不会出现非法内容录入的问题。

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