提问者:小点点

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


我想在输入上进行JavaScript实时计算,而无需提交按钮。

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

但是当我有两个文本字段时呢?

我希望它做一些类似于这个链接的事情,在那里它无需提交按钮即可验证和计算:

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”。

你建议我怎么做呢?因为我不希望答案在输入第一个文本字段后一直显示为零。我希望它等到两个字段都输入了数字并验证后才开始实时计算。我也将为此添加验证代码。

谢谢


共3个答案

匿名用户

试着把你的问题表述出来,这样计算机就能理解它。

我只会做一些伪代码。所以你想计算一些东西:

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绑定到两个输入字段,计算机就会理解。

匿名用户

您应该编写一个像valate()这样的函数,您必须检查两个inpute字段的值是否有效,然后计算结果,否则在字段上方显示一条警告消息,该消息是空的或具有错误的值

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

匿名用户

这不完全是我在生产环境中写这篇文章的方式。但这至少应该给你一个好的开始,让你开始寻找你所描述的非常基本的功能。

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