Question

我对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]

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

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

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

  eg qty[0] + qty[0] qty[0] != total[0] (BOX GOES RED FOR total[0])
     qty[1] + qty[1] qty[1] = total[1] (NO CHANGE TO TOTAL BOX FOR total[1])

在用户键入该行的最后一个qty输入后，除了可视化之外，不需要其他验证。

点击最后一个输入时输入（qty [0]或qty [1]如果用户在第二行，或qty [10]如果用户在最后一行），验证将启动并检查是id =＆＃34;总计[$ {status.index}]＆＃34; = id =＆＃34; qty [$ {status.index}]＆＃34;

的三个输入

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

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

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

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

我在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>

Answer 1

使用此fiddle：

<强> 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');
                }
            }

        }

<强> HTML：

 <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>

自动验证Div输入

1 个答案: