jQuery集成autoNumeric插件时动态获取输入框原始数值异常排查

你的代码无法运行的核心错误有两个：

1. 调用插件方法的对象错误：autoNumeric的jQuery适配版本方法是挂载在jQuery包装对象上的，你通过$(this)[0]取到原生DOM元素后，原生对象上根本没有autoNumeric方法，调用自然报错。
2. 对插件存储逻辑的理解有误：你看到的jQuery3600xxx带随机后缀的属性是jQuery内部用来缓存元素挂载的插件实例的键，属于框架内部实现，不同jQuery版本的随机后缀都不一样，本身就不允许开发者直接硬编码访问。另外autoNumeric本身就不会单独存储所谓的“未格式化原始数值”，原始值是调用get方法时，根据当前输入框的显示内容、初始化配置的分隔符/货币符号规则实时反向解析出来的，你翻实例内部属性当然找不到单独存储的原始值，不存在遗漏配置的问题。

直接在jQuery包装对象上调用插件方法即可，修正后的parseBeforeSubmit代码如下：

function parseBeforeSubmit() {
  $("input[name$='something']").val(function() {
    // 保留jQuery包装对象，不要转原生DOM
    return $(this).autoNumeric('get');
  });
}

$(this).autoNumeric('get')会直接返回去掉千分位、货币符号、转换为标准小数点格式的纯数值字符串，完全满足提交要求。

优化建议 #

• 如果表单提交后你还需要保留当前页面的格式化显示效果，不要直接修改输入框的val，建议新增对应隐藏字段存储解析后的纯数值，提交时只传隐藏字段的值，避免修改后输入框格式化效果消失影响体验。
• 可以直接把处理逻辑绑定到表单提交事件上，避免手动调用前置函数出现时机不对的问题，参考代码：

// 替换成你的表单选择器
$("#your-form-id").on('submit', function(e) {
  e.preventDefault();
  const $form = $(this);
  // 遍历所有autoNumeric输入框，替换为解析后的值
  $form.find("input[name$='something']").each(function() {
    const $input = $(this);
    $input.val($input.autoNumeric('get'));
  });
  // 处理完成后触发表单原生提交
  $form[0].submit();
});

• 如果后端需要接收数字类型而非字符串，可以把get返回的结果用parseFloat()做一层转换，注意你配置了3位小数，转换时注意精度问题。

• 所有jQuery插件的方法都只能在$()包装生成的jQuery对象上调用，原生DOM元素不会挂载这些插件方法。
• 不要尝试访问jQuery带随机数字后缀的内部属性，这类属性没有对外兼容性承诺，版本迭代后命名规则随时会变，直接访问会导致代码兼容性极差。

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