Question

我有一个带有6个输入框的表单。我想验证用户是否已使用数字填写每个输入，并且数字总计100。我有一个函数可以验证数字是否超过100，但我如何验证100以下？现在我在输入所有值之前收到错误。

HTML

<fieldset>      
     <input  type="text" name="qty"  id="qty1" oninput="findTotal()" class="hvr-pop" required/>                          
     <input  type="text" name="qty" id="qty2" oninput="findTotal()" class="hvr-pop" required/>                           
     <input type="text" name="qty"  id="qty3" oninput="findTotal()" class="hvr-pop" required/>                         
     <input type="text" name="qty" id="qty4" oninput="findTotal()" class="hvr-pop" required/>                              
     <input type="text" name="qty"  id="qty5" oninput="findTotal()" class="hvr-pop" required/>                            
     <input type="text" name="qty"  id="qty6" oninput="findTotal()" class="hvr-pop" required/>        
</fieldset>      
<output type="text" name="total" id="total" class="hvr-pop" readonly placeholder="Must total 100"></output>

的JavaScript

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

                }
            }                       
        document.getElementById('total').value = tot;   
        // check that weightage scores = 100    
        if (tot > 100 ) {   
            alert("Please make sure numbers total 100.");
                $("input").focus(function() {
                     $( this ).css( "border-color", "red" ).val("");
                });
                $('#form1').find('#total').val('');
                return false;
            }   
    }

Answer 1

正如上面提到的@Aaron，如果您打算以同样的方式处理少于或超过100，则可以将greater than符号更改为does not equal符号：

＆＃13;

<fieldset>      
     <input  type="text" name="qty"  id="qty1" oninput="findTotal()" class="hvr-pop" required/>                          
     <input  type="text" name="qty" id="qty2" oninput="findTotal()" class="hvr-pop" required/>                           
     <input type="text" name="qty"  id="qty3" oninput="findTotal()" class="hvr-pop" required/>                         
     <input type="text" name="qty" id="qty4" oninput="findTotal()" class="hvr-pop" required/>                              
     <input type="text" name="qty"  id="qty5" oninput="findTotal()" class="hvr-pop" required/>                            
     <input type="text" name="qty"  id="qty6" oninput="findTotal()" class="hvr-pop" required/>        
</fieldset>      
<output type="text" name="total" id="total" class="hvr-pop" readonly placeholder="Must total 100"></output>

<script>
    function findTotal() {
        "use strict";
        var arr = document.getElementsByName('qty');
        var tot = 0;
        for(var i=0; i<arr.length;i++){
            if(parseInt(arr[i].value)) {
                tot += parseInt(arr[i].value);

                }
            }                       
        document.getElementById('total').value = tot;   
        // check that weightage scores = 100    
        if (tot !== 100 ) {   
            alert("Please make sure numbers total 100.");
                $("input").focus(function() {
                     $( this ).css( "border-color", "red" ).val("");
                });
                $('#form1').find('#total').val('');
                return false;
            }   
    }
</script>

＆＃13;

然而，正如我所提到的，这是一种糟糕的用户体验，因为每次有人在输入中输入值时都会进行验证，这意味着他们必须关闭多个警报窗口才能填写所有输入。相反，您应该在单击按钮时进行验证，或者至少等待所有输入在验证之前都有值。

Answer 2

要达到预期结果，请在条件

下添加以下内容

if (tot < 100 && arr[5].value) {
    alert("Please make sure numbers total 100");
    for (i = 0; i < arr.length; i++) {
      arr[i].value = null;
    }
  }

HTML：

<fieldset>      
     <input  type="text" name="qty"  id="qty1" oninput="findTotal()" class="hvr-pop" required/>                          
     <input  type="text" name="qty" id="qty2" oninput="findTotal()" class="hvr-pop" required/>                           
     <input type="text" name="qty"  id="qty3" oninput="findTotal()" class="hvr-pop" required/>                         
     <input type="text" name="qty" id="qty4" oninput="findTotal()" class="hvr-pop" required/>                              
     <input type="text" name="qty"  id="qty5" oninput="findTotal()" class="hvr-pop" required/>                            
     <input type="text" name="qty"  id="qty6" oninput="findTotal()" class="hvr-pop" required/>        
</fieldset>      
<output type="text" name="total" id="total" class="hvr-pop" readonly placeholder="Must total 100"></output>

JS：

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

                }
            }                       
        document.getElementById('total').value = tot;   
        // check that weightage scores = 100    
        if (tot > 100 ) {   
            alert("Please make sure numbers total 100.");
                $("input").focus(function() {
                     $( this ).css( "border-color", "red" ).val("");
                });
                $('#form1').find('#total').val('');
                return false;
            }   

 if (tot < 100 && arr[5].value) {
    alert("Please make sure numbers total 100");
    for (i = 0; i < arr.length; i++) {
      arr[i].value = null;
    }
  }



    }

http://codepen.io/nagasai/pen/yJWoLA

验证输入的所有输入总数等于100

2 个答案: