0

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

我允许输入 6 个费用金额，并在提交按钮的每个和 onClick 上进行描述确保已输入说明。

表格基本上看起来像：

<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 项目，说它不是数字，尽管它是，并且边框样式不会改变。

知道我哪里出错了吗？

4

2 回答 2

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;
}
于 2013-03-28T10:42:04.903 回答
0

您的问题出在这些方面；无论条件如何，您都将边框设置为相同（容易犯错误）。

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');   
}

这显然需要您通过将number类添加到所需元素来对 HTML 进行小幅修改，但这是一个很小的牺牲。

jsFiddle 演示

于 2013-03-28T10:56:34.617 回答