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

Question

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

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

（＃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是一个用于格式化数字的函数。 :)

- Alex Berg

---

还没有检查，但是我突然想到了一个问题。如果你正在对所有输入元素进行each()操作，那么很可能也会包括提交按钮，因此它将检查您的提交值并在该值不是数字时失败。虽然我没有测试过，但这似乎很合理;) 此外，代码没有正确关闭，但那可能只是复制+粘贴错误。 - Sondre

@Sondre，我也在考虑这个问题，但他可以（而且应该）使用<button>来解决这个问题。 - David Tang

@Alex Berg 添加了一些我测试过的代码作为答案。那段代码应该可以工作，所以你可以将其与你的代码进行比较，也许你会发现差异。 - Sondre

@Alex Berg 好的，你可以测试一下，也许你能够将这个函数适应到你自己的项目中。http://pastebin.com/UajaEc2e 这是我对你的表单提供的一个简单检查的建议。希望这能对你有所帮助，伙计:) 我将你的表单分成了两个部分，其中一个是可以填写的字段，而另一个是只读部分，结果似乎是粘贴在那里的。这样可以避免表单验证尝试触及只读部分，因为据我所见，它不需要进行验证，因为它是由你的计算提供的数据，应该在那里设置。 - Sondre

@Sondre：太好了！实际上，不用分离表单也可以工作。也许在each()函数中包含整个处理部分会搞砸事情。请将其粘贴在此处，以便我可以将其投票为答案。再次感谢。 - Alex Berg

Answer 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的位置。

编辑：将代码链接添加到OPs表格 http://pastebin.com/UajaEc2e

- Sondre

---

我在这里碰壁了。你的代码当然可以工作，我也找不到与我的代码有任何区别，但是我的代码仍然无法工作... - Alex Berg

@Alex 嗯，如果没有看到你的更多代码，我也不能再帮你什么了。很可能只是一些愚蠢的错误，等你找到它后你会笑出声的;) - Sondre

哈哈，很有可能... 我会更新整个代码块，如果你有时间的话，随时欢迎查看。 - Alex Berg

Answer 2

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

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

- RoToRa

---

谢谢您的回答。不过还是没有运气，它完全忽略了if语句... - Alex Berg

Answer 3

基于Sondre（谢谢！Sondre）上面的例子，我在Fiddle上开发了一个示例，以便大家更好地理解如何实现

示例：点击此处

$("#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>

- socialCoder