使用 Jquery each() 循环输入字段以进行验证

Posted 2023-05-09

【中文标题】使用 Jquery each() 循环输入字段以进行验证

【英文标题】：Looping through input fields for validation using Jquery each()

【发布时间】：2011-06-13 02:18:49

【问题描述】：

我正在制作一个表单，并且希望代码仅在输入值是数字时才执行。我试图避免使用某种验证插件，并且想知道是否有一种方法可以遍历输入字段并检查值。

我一直在尝试以下方法，但我认为我的逻辑是错误的：

（#monthlyincome 是表单 ID）

$("#submit").click(function() 

  $("#monthlyincome input").each(function() 

       if (!isNaN(this.value)) 
       // process stuff here

       

   );

);

有什么想法吗？

这是整个更新的代码：

$("#submit").click(function() 

    $("#monthlyincome input[type=text]").each(function() 
        if (!isNaN(this.value)) 
            // processing data      
            var age         = parseInt($("#age").val());
            var startingage = parseInt($("#startingage").val());

            if (startingage - age > 0)  

                $("#field1").val(startingage - age);
                $("#field3").val($("#field1").val());

                var inflationyrs    = parseInt($("#field3").val());
                var inflationprc    = $("#field4").val() / 100;
                var inflationfactor = Math.pow(1 + inflationprc, inflationyrs);
                $("#field5").val(inflationfactor.toFixed(2)); 

                var estyearlyinc    = $("#field6").val();
                var inflatedyearlyinc = inflationfactor * estyearlyinc;
                $("#field7").val(FormatNumberBy3(inflatedyearlyinc.toFixed(0), ",", "."));

                var estincyears = $("#field2").val();
                var esttotalinc = estincyears * inflatedyearlyinc;
                $("#field8").val(FormatNumberBy3(esttotalinc.toFixed(0), ",", "."));

                var investmentrate   = $("#field9").val() / 100;
                var investmentfactor = Math.pow(1 + investmentrate, inflationyrs);
                $("#field10").val(investmentfactor.toFixed(2));

                var currentsavings = $("#field11").val();
                var futuresavings  = currentsavings * investmentfactor;
                $("#field12").val(FormatNumberBy3(futuresavings.toFixed(0), ",", "."));

                //final calculations
                var futurevalue = (1 * (Math.pow(1 + investmentrate, inflationyrs) - 1) / investmentrate);
                var finalvalue = (1 / futurevalue * (esttotalinc - futuresavings));

                $("#field13").val(FormatNumberBy3(finalvalue.toFixed(0), ",", "."));

            
            // end processing
        
    );

);

FormatNumberBy3 是一个用于...格式化数字的函数。 :)

【问题讨论】：

没有检查这个，但它突然出现在我的脑海里。如果你在所有输入元素上执行each()，那很可能也包括提交按钮，所以它会检查提交的值，如果不是数字则失败。尚未对此进行测试，但似乎合乎逻辑；）那里的代码也没有正确关闭，但这可能只是复制+粘贴错误。

@Sondre，我也这么认为，但他可以（也应该）使用<button> 来解决这个问题。

@Sondre：我一直在尝试使用具有相同（否定）结果的类（仅对应于几个输入字段）。关闭确实是复制粘贴错误。 :P @Box9：我实际上并没有使用按钮，但即使我使用 $(".classname").each()，它仍然无法工作。

@Box9 是的，使用任何其他类型的元素提交应该可以解决它。或者针对特定的输入类型，例如 input[type=text]，因为它很可能只是您想要检查的文本字段。对单选按钮进行检查没有多大意义；）

@Alex Berg 好的，您可以对此进行测试，也许您可​​以根据自己的情况调整此功能。 pastebin.com/UajaEc2e 是我对您表格的简单检查的建议。希望这可以对伴侣有所帮助:) 将您的表单分成两个表单，其中一个是可以填写的字段，而另一个是似乎粘贴结果的只读部分。这是为了避免表单验证尝试触摸只读部分，据我所知，不需要验证，因为它是从您的计算中提供的数据，应该在那里设置。

【参考方案1】：

在这里测试一下效果很好：

$(function() 
    $("#submit").click(function() 
        $("#myForm input[type=text]").each(function() 
            if(!isNaN(this.value)) 
                alert(this.value + " is a valid number");
            
        );
        return false;
    );
);

在这样的表格上：

<form method="post" action="" id="myForm">
    <input type="text" value="1234" />
    <input type="text" value="1234fd" />
    <input type="text" value="1234as" />
    <input type="text" value="1234gf" />
    <input type="submit" value="Send" id="submit" />
</form>

在你认为合适的时候移动 return false

编辑：链接到 sdded 到 OP 表单的代码 http://pastebin.com/UajaEc2e

【讨论】：

我在这里撞墙了。您的代码当然可以工作，我找不到与我的任何区别，但我的代码仍然无法工作......

@Alex 好吧，在没有看到更多代码的情况下，我只能为您提供更多帮助。很可能是一些愚蠢的错误，一旦您找到它就会大笑；）

哈哈很有可能...我会更新整个代码块，如果您有时间，请随时查看。

【参考方案2】：

value 是一个字符串。您需要先尝试将其转换为数字。在这种情况下，一个简单的单一 + 就可以解决问题：

if (!isNaN(+this.value)) 
  // process stuff here

【讨论】：

感谢您的回答。仍然没有运气，它完全忽略了 if 语句......

【参考方案3】：

基于上面的 Sondre（谢谢！Sondre）示例，我在 Fiddle 中开发了一个示例，以便人们更好地理解实施

示例：Click Here

$("#submit").on("click", function() 
  var isValid = [];
  var chkForInvalidAmount = [];
  $('.partialProdAmt').each(function() 
    if ($.trim($(this).val()) <= 0) 
      isValid.push("false");
     else 
      isValid.push("true");
    
    if ($.isNumeric($(this).val()) === true) 
      chkForInvalidAmount.push("true");
     else 
      chkForInvalidAmount.push("false");
    
  );
  if ($.inArray("true", isValid) > -1) 
    if ($.inArray("false", chkForInvalidAmount) > -1) 
      $(".msg").html("Please enter Correct format ");
      return false;
     else 
      $(".msg").html("All Looks good");
    
   else 
    $(".msg").html("Atlest One Amount is required in any field ");
    return false;
  

);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form method="post" action="" id="myForm">
  <input type="text" class="partialProdAmt" value="0" />
  <input type="text" class="partialProdAmt" value="0" />
  <input type="text" class="partialProdAmt" value="0" />
  <input type="text" class="partialProdAmt" value="0" />
  <input type="button" value="Send" id="submit" />
</form>
<div class="msg"></div>