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

Question

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

这是我的代码（也可以在 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 以外的内容（例如 1、100、1001 110011 等）时显示 "is not 1000"。 .) 也可以..

Answer 1

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

不要等待点击，而是等待输入。上层在jquery，纯js:

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

或内联：

oninput="myFunction()"

Answer 2

您可以在 keyup 事件上为您的输入框调用 myFunction()。

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

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

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

Instant validation with optional function for number calculation with instant result

javascript

jquery