建议

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

当我在几个字段中提交带有值的表单时，它仍会显示每个otherExpenseAmount项目的警告，表示它不是数字，尽管它是，并且边框样式不会更改。

知道我哪里出错了？

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类添加到必需的元素中，但这是一个小小的牺牲。

用于循环舍入表单输入字段的JavaScript

2 个答案:

建议

jsFiddle demo