JavaScript For循环圆形表单输入字段

Question

我目前正在创建一个费用表单，并正在编写一个函数来验证输入的数据。

我允许输入6个费用金额并在每个和提交按钮的onClick上输入描述，我试图编写一个for循环，将循环金额字段，检查它们是否为数字，如果是，然后检查以确保已输入描述。

表单基本看起来像:

<form action="##" name="myForm" id="myForm" method="post">
    <input type="text" name="otherExpenseDesc1" id="otherExpenseDesc1">
    <input type="text" name="otherExpenseAmount1" id="otherExpenseAmount1">
    <input type="text" name="otherExpenseDesc2" id="otherExpenseDesc2">
    <input type="text" name="otherExpenseAmount2" id="otherExpenseAmount2">
    <input type="text" name="otherExpenseDesc3" id="otherExpenseDesc3">
    <input type="text" name="otherExpenseAmount3" id="otherExpenseAmount3">
    <input type="text" name="otherExpenseDesc4" id="otherExpenseDesc4">
    <input type="text" name="otherExpenseAmount4" id="otherExpenseAmount4">
    <input type="text" name="otherExpenseDesc5" id="otherExpenseDesc5">
    <input type="text" name="otherExpenseAmount5" id="otherExpenseAmount5">
    <input type="text" name="otherExpenseDesc6" id="otherExpenseDesc6">
    <input type="text" name="otherExpenseAmount6" id="otherExpenseAmount6">
    <input type="submit" name="formSubmitBtn" value="SUBMIT" onClick="checkForm();">
</form>

我现在的javascript代码是:

function checkForm() {
    var errMsg = "";
    var otherExpense1 = document.getElementById('otherExpenseAmount1').value;
    var otherExpenseDesc1 = document.getElementById('otherExpenseDesc1').value;
    var otherExpense2 = document.getElementById('otherExpenseAmount2').value;
    var otherExpenseDesc2 = document.getElementById('otherExpenseDesc2').value;
    var otherExpense3 = document.getElementById('otherExpenseAmount3').value;
    var otherExpenseDesc3 = document.getElementById('otherExpenseDesc3').value;
    var otherExpense4 = document.getElementById('otherExpenseAmount4').value;
    var otherExpenseDesc4 = document.getElementById('otherExpenseDesc4').value;
    var otherExpense5 = document.getElementById('otherExpenseAmount5').value;
    var otherExpenseDesc5 = document.getElementById('otherExpenseDesc5').value;
    var otherExpense6 = document.getElementById('otherExpenseAmount6').value;
    var otherExpenseDesc6 = document.getElementById('otherExpenseDesc6').value;
    for (i=1; i<7; i++) {       
        expenseNo = 'otherExpense' + i;
        expenseDescNo = 'otherExpenseDesc' + i;
        if (expenseNo != "") {
            if (isNaN(expenseNo)) {
                alert(expenseNo + ' is not a number');
                errMsg = errMsg + 'The amount must be a number.<br />';
                document.getElementById('otherExpenseAmount' + i).style.border = '2px sold #990000';
            } else {
                alert('otherExpenseAmount' + i + ' is a number');
                document.getElementById('otherExpenseAmount' + i).style.border = '2px sold #990000';
            }
        }
    }
    if (errMsg != "") {
        showDialog('alert', 'OK', '', errMsg, '');
    }
}

当我提交有几个字段值的表单时，它仍然为每个expenseamount项显示一个警告，说它不是数字，尽管它是，边框样式没有改变。

你知道我哪里做错了吗?

Answer 1

您正在尝试使用字符串访问变量。您应该修改代码以使用数组，如下所示:

jsFiddle

function checkForm() {
    var errMsg = "";
    var otherExpense = [];
    otherExpense.push(document.getElementById('otherExpenseAmount1').value);
    otherExpense.push(document.getElementById('otherExpenseAmount2').value);
    otherExpense.push(document.getElementById('otherExpenseAmount3').value);
    otherExpense.push(document.getElementById('otherExpenseAmount4').value);
    otherExpense.push(document.getElementById('otherExpenseAmount5').value);
    otherExpense.push(document.getElementById('otherExpenseAmount6').value);
    // 0-based index for arrays
    for (i=0; i<6; i++) { 
        if (otherExpense[i] != "") {
            if (isNaN(otherExpense[i])) {
                alert('otherExpense ' + (i + 1) + ' is not a number (=' + otherExpense[i] + ')');
                errMsg = errMsg + 'The amount must be a number.<br />';
                document.getElementById('otherExpenseAmount' + (i + 1)).style.border = '2px sold #990000';
            } else {
                alert('otherExpenseAmount' + (i + 1) + ' is a number');
                document.getElementById('otherExpenseAmount' + (i + 1)).style.border = '2px sold #990000';
            }
        }
    }
    if (errMsg != "") {
        alert(errMsg);
        //showDialog('alert', 'OK', '', errMsg, '');
    }
    return false;
}

Answer 2

你的问题在这几行;你将边框设置为相同的，而不考虑条件(容易犯的错误)。

if (isNaN(expenseNo)) {
    alert(expenseNo + ' is not a number');
    errMsg = errMsg + 'The amount must be a number.<br />';
    document.getElementById('otherExpenseAmount' + i).style.border = '2px sold #990000';
// -----------------------------------------------------------------------------^^^^^^
} else {
    alert('otherExpenseAmount' + i + ' is a number');
    document.getElementById('otherExpenseAmount' + i).style.border = '2px sold #990000';
// -----------------------------------------------------------------------------^^^^^^
}

<标题> 建议

我讨厌做那个人。

你考虑过采用jQuery吗?它是为这种任务而设计的。利用filter等方法和简单的选择器，可以很容易地确定所有输入是否满足您的要求。下面是一个例子:

// select all inputs with a class of "number"
// then filter those inputs, selecting only those where the value is "not a number"
// if there is a length, i.e. more than 0 were found, alert a message
if ($('input.number').filter(function() { return isNaN(this.value); }).length) {
    alert('Please ensure all numbers are valid');   
}

这显然需要您对HTML做一些小修改，通过将number类添加到所需的元素中，但这是一个小小的牺牲。

<<h2> jsFiddle演示/h2>