具有可选功能的即时验证,用于数字计算,即时结果

时间:2017-08-08 15:12:41

标签: javascript jquery

我想立即显示错误,直到请求填写正确。这意味着我希望用户在不点击按钮的情况下立即获得他正在输入的号码......

这是我的代码(也可在JSFiddle上找到):

HTML:

<input type="number" id="myNumber" value="Error">
  <button onclick="myFunction()">Click</button>
<p id="Error"></p>

JS:

window.myFunction = function() {
var err = " is not 1000!"
  var num = document.getElementById("myNumber").value;
      if (num == 1000) {
          alert("No Errors!");
      } else {
            if (num !='') {
          document.getElementById("Error").innerHTML = num+err;
          }
          else {
          document.getElementById("Error").innerHTML = err;
          }
      }
}

我正在寻找一个简单的解决方案,在计算数字之前使用一个函数,所以只要在输入1000以外的东西时显示“不是1000”(如1,100,1001 110011等)。也可以很好..

2 个答案:

答案 0 :(得分:1)

$("#myNumber").on("input",myFunction);

不要等待点击,而是输入。上面是jquery,纯js:

document
  .getElementById("myNumber")
  .addEventListener("input",myFunction);

或内联:

oninput="myFunction()"

答案 1 :(得分:0)

您可以在myFunction()事件上为您的输入框致电keyup

&#13;
&#13;
window.myFunction = function() {
var err = " is not 1000!"
  var num = document.getElementById("myNumber").value;
  if (num == 1000) {
      alert("No Errors!");
      document.getElementById("Error").innerHTML = "";
  } else {
  		if (num !='') {
      document.getElementById("Error").innerHTML = num+err;
      }
      else {
      document.getElementById("Error").innerHTML = err;
      }
  }
}
&#13;
<input type="number" id="myNumber" onkeyup="myFunction()" value="Error">
  <button onclick="myFunction()">Click</button>
<p id="Error"></p>
&#13;
&#13;
&#13;