表单提交前用onsubmit拦截计算总和最轻量高效，需return false或event.preventdefault()阻止默认提交；用queryselectorall批量获取input值，parsefloat转换并过滤nan；结果写入name属性的hidden输入框供后端接收，并校验数值有效性。
表单提交前用 onsubmit 拦截并计算总和
直接在 <form></form> 上绑定 onsubmit 是最轻量、兼容性最好的方式。它不依赖外部库，也不需要额外监听输入事件——只在真正提交时触发一次计算，避免频繁重算带来的性能干扰。
关键点是：必须在函数中显式返回 false 或调用 event.preventDefault()，否则表单仍会按默认行为跳转或刷新页面。
- 推荐写法：
onsubmit="return calculateTotal()"，函数末尾return true允许提交，return false阻止提交 - 若用
addEventListener，记得加event.preventDefault() - 别把计算逻辑写在
onclick里——按钮点击不等于表单提交（比如回车触发）
用 querySelectorAll 批量读取数值型 input 的值
多个数字输入框通常有共性特征，比如 class 名为 amount 或 name 以 item_ 开头。用 querySelectorAll 一次性获取所有目标元素，比逐个写 document.getElementById 更可靠、更易维护。
注意：input 的 .value 总是字符串，必须用 parseFloat() 转换；遇到空值、非数字时 parseFloat 返回 NaN，需过滤掉。
- 安全转换写法：
const val = parseFloat(input.value) || 0 - 避开 type="number" 的坑：即使设了
type="number"，用户清空后.value仍是空字符串，不是0或null - 不要用
parseInt替代 —— 它会截断小数，比如"12.99"变成12
把结果写入隐藏域 <input type="hidden"> 再提交
后端通常只接收表单字段，不执行前端 JS。想让服务端拿到总和，不能只靠显示一个 <span></span>，必须把计算结果塞进一个带 name 属性的表单控件里。
<input type="hidden" name="total_amount"> 是最稳妥的选择：它参与表单序列化，又不会干扰用户界面。
- 务必设置
name属性，否则后端收不到该字段 - 不要用
id代替name—— 表单提交只认name - 如果已有同名字段（比如后端渲染的 hidden input），直接
.value = sum覆盖即可
防错：校验空值、非数字、负数等边界情况
用户可能删掉输入、粘贴乱码、甚至用开发者工具改 DOM。单纯求和不校验，容易导致后端收到 total_amount=NaN 或负数，后续逻辑崩掉。
建议在计算总和前做最小必要校验：允许零和正数，拒绝空、NaN、Infinity 和负值。
- 判断是否有效数字：
!isNaN(val) && isFinite(val) && val >= 0 - 对无效项给出提示（如
alert("第3项不是有效金额")），但别仅靠 alert —— 改成在对应 input 边框标红更友好 - 如果业务要求“至少填一项”，记得在求和前检查数组长度是否为 0
复杂点在于：不同输入框可能有不同精度要求（比如金额要两位小数，数量为整数），这时候 parseFloat 后还得加 .toFixed(2) 或 Math.round()，但注意 .toFixed 返回字符串，得再转回数字或保留字符串形式传给后端。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
