在将计算器输入传递给运算符(=)函数之前,如何在JavaScript中实时验证计算器输入?
两天来,我一直在尝试在JavaScript计算器中实时验证用户输入,然后将总体输入传递给操作符(=)函数。我想要实现的是:我不希望用户连续输入多个运算符符号或点。当用户输入每个输入时,我希望计算器实时验证每个输入,这样,如果用户连续输入多个运算符符号或点,计算器将警告用户并自动删除最后一个输入,并在计算器屏幕上更新已验证的输入。比如, 1A)22.3.2+4-6**3++2-^键入时检查输入 听起来您正在寻找事件侦听器。确保您有相应的html输入元素,在本例中:在将计算器输入传递给运算符(=)函数之前,如何在JavaScript中实时验证计算器输入?,javascript,Javascript,两天来,我一直在尝试在JavaScript计算器中实时验证用户输入,然后将总体输入传递给操作符(=)函数。我想要实现的是:我不希望用户连续输入多个运算符符号或点。当用户输入每个输入时,我希望计算器实时验证每个输入,这样,如果用户连续输入多个运算符符号或点,计算器将警告用户并自动删除最后一个输入,并在计算器屏幕上更新已验证的输入。比如, 1A)22.3.2+4-6**3++2-^键入时检查输入 听起来您正在寻找事件侦听器。确保您有相应的html输入元素,在本例中: 建议 我认为最好让用户完成他们正
建议
我认为最好让用户完成他们正在键入的内容,然后进行检查。这种行为可以通过使用事件侦听器blur
或验证来实现,就像在submit
事件期间提交一样(未解释,但您可以查找或询问)
如果一起构造正则表达式(regEx),您可能会找到一种更好的方法来验证字符串。这有点复杂,只有当你对它们有信心时才应该这样做。那么“6+-6”呢,这是一个有效的数学。编写或使用表达式解析器难道没有意义吗?数学有一个众所周知的语法。这是一个相当常见的计算机科学面试问题。你可以在互联网上找到它的答案。@DaveNewton是的,我同意你的观点。@Fallereneaper请你有任何链接吗?嗯。。。也许我做得太过火了,你只是想在每次加载页面时验证一个固定的字符串D
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;
}
}
}
const input = document.getElementById('userInput');
input.addEventListener('keydown', () => {
const p = input.value;
// validation...
})