Question

我正在制作一个包含HTML，CSS和JavaScript的简单计算器。必须使用正则表达式验证输入字段以仅接受数字和数学符号+ - * /。

这是HTML代码中的输入字段：

<input type="text" name="answer" id="answer-field" oninput="checking()" />

这是JavaScript函数checking（）：

function checking(){
  var x = document.calculator.answer.value;  // the value of the input field
  var regex=/[0-9]\b/;  // my failing regex 
    if (x.match(regex) || (x==="+") || (x==="-") || (x==="*") || (x==="/"))
    {
      document.getElementById("problemWithInputMessage").innerHTML="";
      console.log("true, it IS a number");
      return true;
    }
    else if(!(x.match(regex))){
      console.log("false, not a number");
      document.getElementById("problemWithInputMessage").innerHTML="You can only input numbers and the following signs + - * /";
      x = x.substring(0, x.length - 1);   // removing the wrong symbol
      document.calculator.answer.value = x;
      return false;
    }
}

问题有几个。对于初学者来说，正则表达式无法正常工作，因为它只搜索输入字符串的开头和结尾。还有一些标志，不同于+ - * /。留在输入字段内，不要被排除在外。

你能帮我正确验证输入字段的数字和符号+ - * /。仅？

Answer 1

我最终提交了这段代码：

function checking() {
  var x = document.calculator.answer.value;
  document.getElementById("problemWithInputMessage").innerHTML="";
    var regexNumbers = /[0-9]+$/;                       //Regular Expression for the numbers
    var regexSigns = new RegExp(/[\+\-\/\*]+$/g);       //Regular Expression for the Special Signs

    if(x.match(regexSigns) || x.match(regexNumbers)) {  //checking for Numbers and the Special allowed signs
        return true;
    }
    else {
      document.getElementById("problemWithInputMessage").innerHTML="You can only input numbers and the following signs + - * /";
      x = x.substring(0, x.length - 1); //Deleting the last symbol if it is not allowed
      document.calculator.answer.value = x;
      return false;
    }
}

我将2个任务分为2个不同的正则表达式。第一个

/ [0-9] + $ /

仅检查数字，第二个检查

/ [+ - / *] + $ /克

检查特殊符号+ - / *（虽然我忘了放点。）谢谢你的答案，它帮助了很多:)

它不是100％防护，因为如果你在字符串的后面键入它就可以了，但是如果你把光标放在你输入的一串数字中，它仍然允许你输入字母和其他符号在中间。

使用RegEx进行JavaScript简单计算器的数字验证

1 个答案: