Question

所以我对JavaScript很新，我正在尝试一个非常简单的输入文本并检查它。它似乎不像我想要的那样工作。我希望所有输入都通过checkInputs。在所有这些都是100％之后，我希望它检查hoursWorked和horlyRate是否是0以上的数字。似乎只是转到checkNumberValidation而不检查是否所有输入都已填满。

我得到了：

    function checkNumbersValidation(field){
        if( isNaN(field) ) {
            field.value = "Must be a number";
            field.focus("");
        }
    }

    function checkInputs(field) {
        var test = false;
        do{
            if ( field.value === null || field.value.trim() === "" ) {
                field.value = "Input needed";
                //set focus
                field.focus("");
            }else if (field.value === "0") {
                field.value = "Can't be zero";
                field.focus("");
            }else {
                tests = true;
            }
        }while (test = false)
    }
    function handelCalcButtonClicked (e) {
        var passFirstTests = false;

        var textFields = ["fullName", "hoursWorked", "hourlyRate"];

        for( var i = 0; i < textFields.length; i ++ ) {
            var field = document.getElementById(textFields[i]);
            checkInputs(field);
        }

        if( **something** ) {

            var numberFields = ["hoursWorked", "hourlyRate"]

            for ( var i = 0; i < numberFields.length; i++ ) {
                field = document.getElementById(numberFields[i]);

                checkNumbersValidation(field);
            }
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("calcButton").addEventListener("click", handelCalcButtonClicked, false);
    });

显然，我不知道自己在做什么。在函数handelCalcButtonClicked中，我不确定如何继续下一部分（部分Saying something）。你能帮忙的话，我会很高兴！

Answer 1

这个怎么样：

function checkNumbersValidation(field) {
    if (isNaN(field)) {
        field.value = "Must be a number";
        field.focus("");
    }
}

function checkInputs(field) {
    if (!field.value || !field.value.trim()) {
        field.value = "Input needed";
        field.focus("");
        return;
    if (field.value === "0") {
        field.value = "Can't be zero";
        field.focus("");
    }
}

function handelCalcButtonClicked (e) {
    var textFields = ["fullName", "hoursWorked", "hourlyRate"],
        numberFields = [          "hoursWorked", "hourlyRate"],
        i,
        field;

    for (i = 0; i < textFields.length; i++) {
        field = document.getElementById(textFields[i]);
        checkInputs(field);
    }

    for (i = 0; i < numberFields.length; i++) {
        field = document.getElementById(numberFields[i]);
        checkNumbersValidation(field);
    }
}

document.addEventListener("DOMContentLoaded", function() {
document.getElementById("calcButton").addEventListener("click", handelCalcButtonClicked, false);
});

或：

function checkInput(field, isnumber) {
    if (!field) return;
    if (isnumber === true && isNaN(field)) {
        field.value = "Must be a number";
        field.focus("");
        return;
    }
    if (field.value === "0") {
        field.value = "Can't be zero";
        field.focus("");
        return;
    }
    if (!field.value || !field.value.trim()) {
        field.value = "Input needed";
        field.focus("");
    }
}

function handelCalcButtonClicked (e) {
    checkInput(document.getElementById('fullName');
    checkInput(document.getElementById('hoursWorked', true);
    checkInput(document.getElementById('hourlyRate', true);
}

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("calcButton").addEventListener("click", handelCalcButtonClicked, false);
});

Answer 2

在checkNumbersValidation中你需要在field.value上进行isNan调用，而不是字段：

 if( isNaN(field.value) )

如果您想知道所有字段是否已通过checkInputs并且已通过，则需要checkInputs来返回每个字段是否已通过：

function checkInputs(field) {
    if ( field.value === null || field.value.trim() === "" ) {
        field.value = "Input needed";
        //set focus
        field.focus("");
        return false;
    } else if (field.value === "0") {
        field.value = "Can't be zero";
        field.focus("");
        return false;
    }
    return true;
}

这将让您知道所有字段是否都通过了检查：

var passedAllChecks = true;
for( var i = 0; i < textFields.length; i ++ ) {
    var field = document.getElementById(textFields[i]);
    passedAllChecks = checkInputs(field) && passedAllChecks;
}
if(passedAllChecks) {
    /* do number validation stuff */
}

有人能解释为什么我的功能不起作用吗？

2 个答案: