JavaScript使用isNaN来验证返回NaN

时间:2013-10-20 00:33:08

标签: javascript validation if-statement for-loop

我在这里有一些代码可以验证文本框中的输入是不是空字符串而是isNaN。当我对输入的金额进行这些验证时,我希望将它们添加起来..但是当用户没有在一个或多个金额字段中输入任何内容时,程序应该只添加输入的字段。但相反,我在总场中显示NaN。

链接到完整代码:http://jsfiddle.net/KxNqQ/

var $ = function (id) {
return document.getElementById(id);
}

var calculateBills = function () {

var myErrorFlag = "N";

for (i = 1; i <= 4; i++) {
    AmountNumber = 'amount' + i;
    AmountValue = $(AmountNumber).value;

    if (AmountValue != "" && isNaN(AmountValue)) {
        $(AmountNumber).style.color = "red";
        myErrorFlag = "Y";
    } else {
        $(AmountNumber).style.color = "black";
        myErrorFlag = "N";
    }


}

if (myErrorFlag != "Y") {
    var Amount = 0;
    for (i = 1; i <= 4; i++) {
        Amount += parseInt($('amount' + i).value,10);
    }
    $('total').value = Amount;
    }

   }
var clearFields = function () {

for (i = 1; i <= 4; i++) {
    itemName = 'item' + i;
    $(itemName).value = "";
}
for (i = 1; i <= 4; i++) {
    amountName = 'amount' + i;
    $(amountName).value = "";
}
$('total').value = "";


}
window.onload = function () {
$("clearfields").onclick = clearFields;
$("addbills").onclick = calculateBills;
}

2 个答案:

答案 0 :(得分:3)

我认为你的要求有点困惑,或者至少让我感到困惑。因此,为了回答您的问题,我将重新阐述要求,以便更好地理解它们。当我不能100%确定要求时,这是一个很有用的练习;如果我不能正确地得到要求,那么我会得到正确的代码吗?

所以要求 - 正如我所理解的那样 - 是:

Given each amount input
When the input has a value
And that value is a number
Then add the value to the total
And make the input color black
But if the input does not have a value
Or that value is not a number
Then make the input color red

通过你的代码,我可以看到它的一些问题。首先,我注意到AmountNumberAmountValue都是全局变量,因为它们未被var keyword声明为本地变量。所以在修复我们的代码之前,让我们改变它。我们还将变量名称更改为更准确地描述它们的内容,希望使代码更容易理解:

var input = $('amount' + i);
var value = input.value;

现在,请注意我选择将元素存储在input变量中。这样我们就不必在循环内多次查找了。在DOM中查找内容可能很昂贵,因此我们希望将其保持在最低限度。还有其他方法可以查找元素,例如getElementsByClassNamequerySelectorquerySelectorAll;这些留给读者进行研究和评估的练习。

接下来,在循环的每次迭代中,检查AmountValue 是否为字符串,同时是一个数字:

if (AmountValue != "" && isNaN(AmountValue)) {

只要AmountValuetruthy(非空字符串就是这种情况)并且只要isNaN认为它是一个数字(就是这种情况),这都是正确的对于包含数字的字符串。)这真的很混乱;如果我正确理解你的代码,那么这个子句用于检查无效输入,如果是真,则应将输入字段标记为红色并设置标志。即这是上述要求中的子句。

让我们将其重写为 when 子句,我们稍后会处理。在我们这样做之前,让我们看一下myErrorFlag。它被用于 - 我认为 - 看看所有输入是否形成良好,在这种情况下,将其全部添加。好吧,验证和求和可以一举完成,所以让我们摆脱旗帜并在验证它们的同时对值进行求和。因此,我们将myErrorFlag替换为total变量:

var total = 0;

现在,让我们回到我们的条款。要求说:

When the input has a value
And that value is a number
Then add the value to the total

在代码中,应该看起来像这样:

if (value && !isNaN(value)) {
  total += parseInt(value, 10);
  input.style.color = 'black';
}

这里有几件事情要发生。首先,if语句已经从头开始了。它首先检查valuetruthy,然后是一个数字。第二次检查可能有点难以阅读,因为它本质上是一个双重否定;在英语中它写着“不是一个数字”,即“是一个数字”。我将把它作为练习让读者弄清楚是否有更容易理解的方式来编写这个支票。

现在我们的要求中的条款呢?

But if the input does not have a value
Or that value is not a number
Then make the input color red

嗯,它基本上与我们之前的陈述相反,所以让我们简单地添加一个else子句:

else {
  input.style.color = 'red';
}

因为要求没有在本节中提及total变量,所以它被忽略,并且不会显示在最终结果中。

全部添加(无双关语)the code – with comments – looks like this

var calculateBills = function () {
  var total = 0;

  for (i = 1; i <= 4; i++) {
    // Given each amount input
    var input = $('amount' + i);
    var value = input.value;

    if (value && !isNaN(value)) {
      // When the input has a value
      // And that value is a number
      // Then add the value to the total
      total += parseInt(value, 10);

      // And make the input color black
      input.style.color = 'black';
    } else {
      // But if the input does not have a value
      // Or that value is not a number
      // Then make the input color red
      input.style.color = 'red';
    }
  }

  $('total').value = total;
};

可以从中学到更多东西,以获得更好的代码。例如,如果输入数量发生变化,或者其ID名称发生变化,则此代码将中断。这是因为它们是由它们的ID专门选择的,因此,如果这些更改,则此代码将不再起作用。

另一个潜在的问题是我们在输入时设置内联样式。这意味着为了使该代码与网站的样式保持同步,它必须改变。通常,混合样式和这样的功能不是一个好主意,应该避免。一种方法是使用类名,然后打开和关闭它们。顺便说一下,这也可以帮助我之前提到的问题。

还有其他问题,但我们将把这些问题留在另一天。希望这有帮助!

答案 1 :(得分:0)

试试这个

var calculateBills = function () {
    var Amount = 0;
    for (i = 1; i <= 4; i++) {
        var AmountElement = $('amount' + i),
            AmountValue = AmountElement.value;
        if (AmountValue != "" && !isNaN(AmountValue)) {
            AmountElement.style.color = "red";
            Amount += parseInt(AmountValue,10);
        } else {
            AmountElement.style.color = "";
        }
    }
    $('total').value = Amount;
};

Demo

无论如何,您可以使用类(例如id="amount1")而不是使用ID为id="amount2"id="amount3"class="amount"等的元素,而不是{ {1}}