JavaScript行列求和表单验证异常：如何最小改动修复？

我仔细排查了你的代码，发现几个核心逻辑偏差导致了"Invalid inputs!!!"的错误提示，下面是最小改动的修复方案：

问题根源梳理 #

1. 列总和验证逻辑完全错误：你要求每列总和必须严格等于100，但原代码在每一个输入框的处理过程中就提前判断列总和是否在1-100区间，不仅条件不符，还在累加未完成时就做判断，结果必然出错。
2. 行总和验证逻辑偏差：原代码只要求除最后一行外的其他行总和等于100，但你的需求是所有行的总和都要满足大于0且≤100。
3. 重复ID违反HTML规范：多个输入框使用了相同的id="col1"/col2/col3，这会导致jQuery选择器行为不可预期，影响总和计算。

最小改动修复步骤 #

1. 修正HTML中的重复ID #

把所有输入框的id属性改为class，确保每个元素标识唯一：

<!-- 第一行输入框示例 -->
<td><input type="number" class="col1" min="0" max="100"></td>
<td><input type="number" class="col2" min="0" max="100"></td>
<td><input type="number" class="col3" min="0" max="100"></td>
<!-- 其他行的输入框同理，将id替换为对应的class -->

2. 重写sumRowVals函数的验证逻辑 #

替换原函数为以下代码，调整验证时机和条件：

function sumRowVals() {
    isvalid = true;
    resetFigs();
    var rowCount = $(".tabbody tr").not(':first').length;
    
    // 第一步：先完成所有行和列的总和计算
    $(".tabbody tr").not(':first').each(function(rindx) {
        var temp = 0;
        var cindx = 1;
        $("input[type=number]", this).each(function() {
            var elval = !isNaN($(this).val()) ? parseInt($(this).val()) : 0;
            var sumcol = $("#ccol" + cindx);
            sumcol.html(parseInt(sumcol.html()) + elval);
            temp += elval;
            cindx++;
        });
        // 验证当前行总和是否符合1-100的要求
        if (!(temp > 0 && temp <= 100)) {
            isvalid = false;
        }
        $("#rcol" + (rindx + 1)).html(temp);
    });
    
    // 第二步：所有行计算完成后，统一验证每列总和是否严格等于100
    $('*[id*=ccol]').each(function() {
        var colTotal = parseInt($(this).html());
        if (colTotal !== 100) {
            isvalid = false;
        }
    });
    
    return isvalid;
}

3. 移除原函数中的错误提前验证 #

删掉原代码中处理每个输入框时的这两行错误判断：

// 移除这两行不符合需求的提前验证
if(elval > 100){isvalid=false;}
if(!(parseInt($(sumcol).html()) > 0 && parseInt($(sumcol).html()) <= 100)){isvalid=false;}

改动说明 #

• 替换ID为class解决了HTML规范问题，确保选择器能正确选中所有列的输入框。
• 先完成所有总和计算再统一验证，避免了累加过程中判断未完成数值的错误。
• 行总和验证改为检查所有行是否满足>0且≤100，完全匹配你的需求。
• 列总和验证调整为在所有行计算完成后检查是否严格等于100，符合提交要求。

修改后，表单会正确验证两个条件：只有当所有行总和在1-100之间，且所有列总和严格等于100时，才会启用提交按钮并隐藏错误提示。

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