Question

我开发了一个表单，我想允许在以下情况下提交表单：

1-行总数大于零且小于或等于100意味着在（1-100）

之间

2-列总数等于100而不是更少。

所以我想出了以下页面：

查看：

代码：

<!DOCTYPE HTML>
<html>
<head>
<title>Test Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- jQuery Library -->
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript">
var isvalid=true;
$( document ).ready(function() {
    $("#test").prop("disabled",true);
    $(".tabbody input[type=number]").blur(function(){
        validateSubmit();
    });
});
function validateSubmit()
{
    var retval = sumRowVals();
    $("#btn-save").prop("disabled",!retval);
    $("#msgdiv").html(retval ? "":"Invalid inputs!!!");
}
function sumRowVals()
{
    isvalid=true;
    resetFigs();
    var rindx=1;
    $(".tabbody tr").not(':first').each(function(){
        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=temp+elval;
            cindx++;
            if(elval > 100){isvalid=false;}
            if(!(parseInt($(sumcol).html()) > 0 && parseInt($(sumcol).html()) <= 100)){isvalid=false;}
        });
        if(rindx != $('.tabbody tr').not(':first').length)
        {
            if(temp != 100){isvalid=false;}
            $("#rcol"+rindx).html(temp);
        }
        rindx++;
    });
    return isvalid;
}
function resetFigs()
{
    $('*[id*=ccol]').each(function() {
    $(this).html("0");
});
}
</script>
</head>
<body>
<form action="test2.php" method="post">
  <table class="tabbody">
    <tr>
      <td></td>
      <td>plo1</td>
      <td>plo2</td>
      <td>plo3</td>
      <td>total</td>
    </tr>
    <tr>
      <td> slo1 </td>
      <td><input type="number" id="col1" min="0" max="100"></td>
      <td><input type="number" id="col2" min="0" max="100"></td>
      <td><input type="number" id="col3" min="0" max="100"></td>
      <td id="rcol1"></td>
    </tr>
    <tr>
      <td> slo2 </td>
      <td><input type="number" id="col1" min="0" max="100"></td>
      <td><input type="number" id="col2" min="0" max="100"></td>
      <td><input type="number" id="col3" min="0" max="100"></td>
      <td id="rcol2"></td>
    </tr>
    <tr>
      <td> slo3 </td>
      <td><input type="number" id="col1" min="0" max="100"></td>
      <td><input type="number" id="col2" min="0" max="100"></td>
      <td><input type="number" id="col3" min="0" max="100"></td>
      <td id="rcol3"></td>
    </tr>
    <tr>
      <td> slo4 </td>
      <td><input type="number" id="col1" min="0" max="100"></td>
      <td><input type="number" id="col2" min="0" max="100"></td>
      <td><input type="number" id="col3" min="0" max="100"></td>
      <td id="rcol4"></td>
    </tr>
    <tr>
      <td> total </td>
      <td id="ccol1"></td>
      <td id="ccol2"></td>
      <td id="ccol3"></td>
    </tr>
  </table>
  <div id="msgdiv" style="color:red;line-height:30px"></div>
  <input type="submit" name="save" value="SAVE" id="btn-save"/>
</form>
</body>
</html>

正如您在视图中看到的那样，数据是正确的，但错误显示无效输入：

DEMO LINK

如何通过最少的更改来解决此问题？

Answer 1

首先，尝试并理解你写的内容！因为你没有检查你上面提到的条件。

第二，亲吻 - 保持简单愚蠢！为什么让东西看起来如此复杂？因为你为什么需要在每次模糊时调用它，如果你必须为什么命名为fn validateSumbit（）。？

Thrid，总是给变量赋予正确的名称。因为，给出正确的名称，这样你就可以很容易地看到你在做什么并自己纠正（就像你正在检查rowSum上的列条件一样）。

最后，下面是你工作的JS，

var isvalid=true;
$( document ).ready(function() {
    $("#test").prop("disabled",true);
    $(".tabbody input[type=number]").blur(function(){
        validateSubmit();
    });
});
function validateSubmit()
{
    var retval = sumRowVals();
    $("#btn-save").prop("disabled",!retval);
    $("#msgdiv").html(retval ? "":"Invalid inputs!!!");
}
function sumRowVals()
{
    isvalid=true;
    resetFigs();
    var elval = 0;
    var rindx=1;
    $(".tabbody tr").not(':first').each(function(){
        var rowSum=0;
        var cindx=1;
        $("input[type=number]",this).each(function(){
            elval = 0;
            elval = ($(this).val()=="") ? 0:parseInt($(this).val());
            var sumcol = $("#ccol"+cindx);
            $(sumcol).html(parseInt($(sumcol).html())+elval);
            rowSum=rowSum+elval;
            cindx++;
            if(elval > 100){isvalid=false;}
            //if(!(parseInt($(sumcol).html()) > 0 && parseInt($(sumcol).html()) <= 100)){isvalid=false;}
        });
        if(rindx != $('.tabbody tr').not(':first').length)
        {
            if(!(rowSum  > 0 &&  rowSum <= 100)){isvalid=false;}
            $("#rcol"+rindx).html(rowSum);
        }
        rindx++;
    });
    $('*[id*=ccol]').each(function() {
    var tmp = parseInt($(this).html());
        if(tmp != 100)
        {
            isvalid=false;
        }
    });
    return isvalid;
}
function resetFigs()
{
    $('*[id*=ccol]').each(function() {
    $(this).html("0");
});
}

JSFiddle link就在这里。

希望这会有所帮助。：）

JavaScript：验证行的总和和列的总和

1 个答案: