JavaScript实时验证和计算2个或更多输入文本字段

Question

我想在输入时执行JavaScript实时计算，而无需提交按钮。

当我有1个输入文本字段时，我知道如何在JavaScript中进行实时计算。 我将oninput事件用于输入文本字段。

但是，当我有2个文本字段时该怎么办？

我希望它做类似此链接的操作，它无需输入按钮即可进行验证和计算：

https://www.easycalculation.com/algebra/modulo-calculator.php

以以下代码为例：

// input
var a = document.getElementById("a").value; 
var b = document.getElementById("b").value;

// calculation
var result = a * b;

// display result
document.getElementById("result").value;

由于有2个输入文本字段（a和b），因此我希望它仅在用户在两个文本字段中都输入了有效数据之后才进行即时/实时计算。

但是，如果用户更改任一字段，我也希望它进行实时计算。 因此，如果他们输入“ a”和“ b”，它将给出结果，但是如果他们更改“ a”，则它将立即给出新结果，而他们根本不必触摸“ b”。

您如何建议我继续这样做？ 因为我不希望答案在第一个文本字段中输入后立即显示为零。 我希望它等到两个字段都输入并验证了数字后才开始实时计算。 我还将为此添加验证代码。

谢谢

Answer 1

只需尝试解决您的问题，以便计算机可以理解。

我将只做一些伪代码。 所以你想计算一下：

function calculate (valueA, valueB) {
    ... do something ...
    ... output result ...
}

您要检查两个字段是否均有效，然后才进行计算和输出：

function checkFields (fieldA, fieldB) {
    if (fieldA.value.length > 0) { // if it is empty, there is no input
        ... do some additional checking ...
        if (fieldB.value.length > 0) { // if it is empty, there is no input
            ... do some additional checking ...
            ... if all went well: calculate (fieldA.value, fieldB.value);
        }
    }
}

然后将您的checkFields绑定到两个输入字段，计算机就会理解。

Answer 2

您应该编写类似validate（）的函数，在其中必须检查两个inpute字段的值是否有效，然后计算结果，否则在该字段上方显示警告消息，该消息可能为空或值错误

您必须在两个输入的onchange事件上调用validate函数

Answer 3

这并不是我在生产环境中写的方式。 但这至少应该为您寻找的东西提供一个良好的开端-您所描述的非常基本的功能。

<form>
    <input id='a' class='ab' type='text' name='valA'>
    <input id='b' class= 'ab' type='text' name='valB'>
</form>

//下面的带有此标记的JS代码

var someCompositeGroup = document.getElementsByClassName("ab");

function validateForm(){

    // add stuff here 
    var inputVal = 0; 
    var aVal = someCompositeGroup[0] && someCompositeGroup[0].value;
    var bVal = someCompositeGroup[1] && someCompositeGroup[1].value;

    if (aVal && bVal && !isNaN(aVal) && !isNaN(bVal)) {
        inputVal = aVal * bVal; 
        // only update here - 
       console.log(inputVal);
    } else {
        console.log(' not ready to calculate yet '); 
    }
}

for (var i = 0; i < someCompositeGroup.length; i++) {
    someCompositeGroup[i].addEventListener('keyup', validateForm);
}