使用jQuery number插件的带千位分隔符数值如何转整数存入数据库

解决方案 #

方法1：后端直接处理（改代码最少，最稳妥）

转换异常的原因是输入框提交的数值带千位分隔符逗号，intval()解析时遇到非数字字符就会停止读取，只会保留第一个逗号前的数字。直接在转整数前把所有逗号删除即可：

// 先移除所有千位分隔符逗号，再转整数
$nett_budget = str_replace(',', '', $request->get('nett_budget'));
$insert['nett_budget'] = intval($nett_budget);

如果存在用户输入小数点的场景，可以按需加取整逻辑：

$insert['nett_budget'] = (int)round((float)str_replace(',', '', $request->get('nett_budget')));

方法2：前端提交时读取原始数值（不需要修改后端逻辑）

jQuery number插件本身内置了获取无格式原始数值的方法，不需要修改插件配置，只需要在表单提交前，把输入框的显示值替换为原始数值即可：

$('form').on('submit', function() {
  // 调用插件方法获取原始数值，直接覆盖输入框的带格式值再提交
  $('#nett_budget').val($('#nett_budget').number('getValue'));
  return true;
});

这种方式提交到后端的数值本身就没有千位分隔符，直接用原有intval()转换即可。

替代插件推荐

如果要更换同类插件，可使用jquery.inputmask，配置简单，同样支持自动格式化千位分隔符、提交时自动输出原始数值，基础配置示例：

$('#nett_budget').inputmask('integer', {
  groupSeparator: ',',
  autoGroup: true,
  rightAlign: false,
  removeMaskOnSubmit: true // 提交时自动移除掩码，输出原始数值
});

开启removeMaskOnSubmit参数后不需要额外写提交事件处理，插件会自动处理提交内容。

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