Javascript 自动验证Div输入

我对JavaScript的了解非常有限，我需要实现这个前端验证

所以我使用的是Spring后端，需要对我的表单输入进行一些前端验证。 其中将有10行作为div括起来，每行的输入相同

输入将采用这种格式

total[0]|qty[0]||qty[0]||qty[0]
total[1]|qty[1]||qty[1]||qty[1]
total[2]|qty[2]||qty[2]||qty[2]

等等

total[10]|qty[10]||qty[10]||qty[10]

用户首先可以选择输入总金额

用户可以选择输入每行的数量

如果数量[0]的总数不等于用户输入的总数（总数[0]），则该行对应的输入框将变为红色（通知用户他们输入了错误的总数）

用户在最后一次输入中键入该行上的数量后，除视觉验证外，不需要其他验证

在最后一个输入上单击enter（如果用户在第二行，则为数量[0]或数量[1]，如果用户在最后一行，则为数量[10]）时，验证将开始，并选中id=“total[${status.index}]”的框=id=“qty[${status.index}”的三个输入

我在Javascript方面很弱，这就是我所能想到的。我知道这将是遥远的，但任何帮助将不胜感激

<script type="text/javascript">

var index = 0;
function findTotal(){
    var arr = document.getElementsByName('qty')[index];
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }

    document.getElementById('total')[index].value = tot; 
    <!-- if not equal, change the css backround of total[index] to red -->
    index++;
}

    </script>

var指数=0；
函数findTotal（）{
var arr=document.getElementsByName（'qty'）[index]；
var-tot=0；
对于（var i=0；i我会这样做：

这只是想让你知道怎么做，不要直接复制/粘贴，因为可能有一些打字错误。但主要步骤是：


将类添加到每个数量输入，以便您可以按行选择它们
按行恢复总数
按行对所有数量进行循环，并与总计进行比较

在HTML中添加类以标识任何行的每个元素

 <div class="span1_5">
   <form:input path="items[${status.index}].total" size="4"
    class="total${status.index}"  
    id = "total[${status.index}]" />
  </div>

 <!--qtyDis-->
 <div class="span1_5">
 <form:input path="items[${status.index}].qtyDis"size="4"
    onblur="findTotal()" class="qty${status.index}"
   id ="qty[${status.index}]" />
 </div>

 <!--qtyAva-->
 <div class="span1_5">
   <form:input path="items[${status.index}].qtyAva"size="4"
     onblur="findTotal()" class="qty${status.index}"
    id ="qty[${status.index}]" />
 </div>

 <!--qtyDat-->
 <div class="span1_5">
   <form:input path="items[${status.index}].qtyDat"size="4"
    onblur="findTotal()" class="qty${status.index}"
    id ="qty[${status.index}]" />
 </div>



然后在你的JS中

<script type="text/javascript">

   var index = 0;
   function findTotal(){
        var quantity = document.getElementsByClassName('qty' + index);
        var totQty=0;
        for(var i=0;i<quantity.length;i++){
            if(parseInt(quantity[i].value))
            totQty += parseInt(quantity[i].value);
        }

     <!-- if not equal, change the css backround of total[index] to red -->
     if(document.getElementById('total' + index).value != totQty){
          $('.qty'+index).addClass("error");
     }
    index++;
 }

</script>


var指数=0；
函数findTotal（）{
变量数量=document.getElementsByClassName（'数量'+索引）；
var-totQty=0；
对于（var i=0；i使用：

JS:

function findTotal($this) {
            var cls = $($this).attr("class");
            var index = cls.split('qty')[1];
            var totalsum = 0;
            $('.' + cls).each(function () {
                if ($.isNumeric($(this).val())) {
                    totalsum += parseInt($(this).val());
                }
            });
            if ($.isNumeric($(".total" + index).val())) {

                if (totalsum != parseInt($(".total" + index).val())) {
                    $(".total" + index).addClass('error');
                }
                else {
                    $(".total" + index).removeClass('error');
                }
            }

        }

 <div>
            <div class="span1_5"><span>total1:</span><input type="text" class="total1" /></div>
            <div class="span1_5"><span>qty1</span><input type="text" class="qty1" onblur="findTotal(this)" /></div>
            <div class="span1_5"><span>qty1</span><input type="text" class="qty1" onblur="findTotal(this)" /></div>
            <div class="span1_5"><span>qty1</span><input type="text" class="qty1" onblur="findTotal(this)" /></div>
        </div>
    <br /><br /><br />
        <div>
            <div class="span2_5"><span>total2:</span><input type="text" class="total2" /></div>
            <div class="span2_5"><span>qty2</span><input type="text" class="qty2" onblur="findTotal(this)" /></div>
            <div class="span2_5"><span>qty2</span><input type="text" class="qty2" onblur="findTotal(this)" /></div>
            <div class="span2_5"><span>qty2</span><input type="text" class="qty2" onblur="findTotal(this)" /></div>
        </div>

HTML:

function findTotal($this) {
            var cls = $($this).attr("class");
            var index = cls.split('qty')[1];
            var totalsum = 0;
            $('.' + cls).each(function () {
                if ($.isNumeric($(this).val())) {
                    totalsum += parseInt($(this).val());
                }
            });
            if ($.isNumeric($(".total" + index).val())) {

                if (totalsum != parseInt($(".total" + index).val())) {
                    $(".total" + index).addClass('error');
                }
                else {
                    $(".total" + index).removeClass('error');
                }
            }

        }

 <div>
            <div class="span1_5"><span>total1:</span><input type="text" class="total1" /></div>
            <div class="span1_5"><span>qty1</span><input type="text" class="qty1" onblur="findTotal(this)" /></div>
            <div class="span1_5"><span>qty1</span><input type="text" class="qty1" onblur="findTotal(this)" /></div>
            <div class="span1_5"><span>qty1</span><input type="text" class="qty1" onblur="findTotal(this)" /></div>
        </div>
    <br /><br /><br />
        <div>
            <div class="span2_5"><span>total2:</span><input type="text" class="total2" /></div>
            <div class="span2_5"><span>qty2</span><input type="text" class="qty2" onblur="findTotal(this)" /></div>
            <div class="span2_5"><span>qty2</span><input type="text" class="qty2" onblur="findTotal(this)" /></div>
            <div class="span2_5"><span>qty2</span><input type="text" class="qty2" onblur="findTotal(this)" /></div>
        </div>


总计1：
qty1
qty1
qty1




总数2：
qty2
qty2
qty2
Hi@Cralfaro，我尝试了您的解决方案，但每当我单击enter进入下一个输入时，每次访问函数时，索引都会增加1。因此，当您到达qtyDat QTY[0]的最后一个值时索引已经等于3。有没有想过如何克服这个问题？@James_Ryan101现在我们不需要使用索引进行迭代，我们只需要使用特定类选择所有元素并对其进行处理。然后添加此函数findTotal（），在任何输入的模糊中应重命名为checkTotal（）