时间戳

首页 > 解决方案 > 在将计算器输入传递给运算符 (=) 函数之前，如何在 JavaScript 中实时验证计算器输入？

javascript - 在将计算器输入传递给运算符 (=) 函数之前，如何在 JavaScript 中实时验证计算器输入？

问题描述

两天来，我一直在尝试在我的 JavaScript 计算器用户输入中实时验证，然后再将整体输入传递给operator(=) 函数。我想要实现的是：我不希望用户连续输入多个操作符符号或点。当用户输入每个输入时，我希望计算器实时验证每个输入，这样如果用户连续输入多个操作符符号或点，计算器将警告用户并自动删除最后一个输入并更新已验证的输入计算器屏幕。例如;

1A) 22.3.2。+ 4 -6 **3 ++ 2-^ <-- 这是错误的（未验证）

1B) 22.3+4-6*3+2 <-- 这就是我想要的（已验证）

以下是我到目前为止编写的示例代码。

JavaScript
let userInput = "22.2. + 3 -4^"; //as the user is inputting, i want to be validating it in realtime
function validateWrongInput() {

    let p = userInput;
    for (i = 0; i < p.length; i++){
        if ((p.charAt(i) === "!" || p.charAt(i) === "^" ||
            p.charAt(i) === "*" || p.charAt(i) === "/" || p.charAt(i) === "+" ||
            p.charAt(i) === "-" || p.charAt(i) === "(" || p.charAt(i) === ")") &&
            (p.charAt(i - 1) === "!" || p.charAt(i - 1) === "^" ||
            p.charAt(i - 1) === "*" || p.charAt(i - 1) === "/" ||
            p.charAt(i - 1) === "+" || p.charAt(i - 1) === "-" ||
            p.charAt(i - 1) === "(" || p.charAt(i - 1) === ")")) {
            let a = p.split("");
            a.pop();
            let c = a.join("");
            upDisplay.textContent = c; //This shows the user input as he is typing
            updisplayResult = c;
            downDisplay.textContent = "ERROR-Why Two Operators?";  // this shows the final result when the = sign is pressed
            return true;
        } else {
            return false;
        }
    }
}

JavaScript
let userInput = "22.2. + 3 -4^"; //as the user is inputting, i want to be validating it in realtime
function validateDecimal() {
    let p = userInput;
    let pointCount = 0;
    for (let i = 0; i < p.length; i++) {
        if (p.charAt(i) !== "!" && p.charAt(i) !== "^" && p.charAt(i) !== "*" &&
            p.charAt(i) !== "/" && p.charAt(i) !== "+" && p.charAt(i) !== "-") {
            if (p.charAt(i) === "." && pointCount < 1) {
                pointCount += 1
                downDisplay.textContent = " ";
                return "ok";
            } else {
                pointCount = 0;
                let a = p.split("");
                a.pop();
                let c = a.join("");
                upDisplay.textContent = c; //This shows the user input as he is typing
                updisplayResult = c;
                downDisplay.textContent = "ERROR-Why Two Operators?"; // this shows the final result when the = sign is pressed
                return "ERROR-Why Two Operators?"+c;
            }
        } else {
            pointCount = 0;
        }
    }
}

我正在寻找你的帮助。

标签： javascript

解决方案

打字时检查输入

const input = document.getElementById('userInput');
input.addEventListener('keydown', () => {
    const p = input.value;
    // validation...
})

听起来您正在寻找事件侦听器。确保您有相应的 html 输入元素，在这种情况下：<input type="text" id="userInput">

建议

我相信最好让用户完成他们输入的任何内容并在之后检查。这种行为可以通过使用事件侦听器blur或在事件期间提交时进行验证来实现submit（未解释，但您可以查看或询问）。

如果您一起制作正则表达式 (regEx)，您可能会发现验证字符串的更好方法。这有点复杂，只有在您对它们有信心时才应该这样做。

推荐阅读