如何“实时”检查输入的内容

我正在开发一个网络表单，它已经设置了一个文本字段来接收预期的数值。如果此字段的内容不是数字，则表单不会提交，但没有放置错误消息来让用户知道他们填写了错误的此字段。

我的问题是......有没有办法实时检查输入内容并采取措施告诉用户他们没有正确填写？如果一切正常，我希望输入的边框为绿色，如果不是，则将边框设为红色并更改输入的默认文本以告诉他们我们只需要数字。

到目前为止，这大致是我的出发点......

HTML:

<input type="text" class="btn-blue" id="testing"></input>

JS:

$('#testing').attr('placeholder', 'Enter Amount');
var useramount = $("#testing").val();
if (useramount.match(/^\d+$/)) {
   $("#testing").css({border: "2px solid #33CC00 !important"});
} 
else {
  $("#testing").css({border: "2px solid #FF0000 !important"});
  $("#testing").innerHTML = "";
  $('#testing').attr('placeholder', 'Only Numbers Please');
}

我从之前提出的问题中借用了验证的基本原理：检查输入中是否仅输入了数值。 （jQuery） https://stackoverflow.com/questions/9086174/check-if-only-numeric-values-were-entered-in-input-jquery

任何帮助是极大的赞赏。

您可以使用input https://developer.mozilla.org/en-US/docs/Web/Events/input当用户在字段内键入内容时获取更改的事件。在更改事件上，您将获得与事件侦听器附加到的输入元素相对应的元素事件目标 https://developer.mozilla.org/en-US/docs/Web/API/Event/target。使用此参考，您可以使用以下方式获取输入的值value元素上的属性。

检索到该值后，您需要验证它实际上是数字。值得庆幸的是 jQuery 提供了一个方法叫做是数字 https://api.jquery.com/jQuery.isNumeric/这使我们能够做到这一点。

一旦我们确定该值确实是数字，您就可以应用一个类或只是将样式设置为您想要的样式。确保您还检查该值是否已被清空，以免用户感到困惑。

至于验证消息 - 当用户与所述元素交互时设置输入的值不是一个好主意。相反，我选择添加文本元素来表示将根据验证状态有条件地显示的消息。

// Add error message element after input.
$('#some-number').after('<span class="error-message">Please enter numbers only!</span>')

$('#some-number').on('input', function (evt) {
  var value = evt.target.value
  
  if (value.length === 0) {
    evt.target.className = ''
    return
  }

  if ($.isNumeric(value)) {
    evt.target.className = 'valid'
  } else {
    evt.target.className = 'invalid'
  }
})

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: 1px solid black;
}

input.valid {
  border: 1px solid green;
}

input.invalid {
  border: 1px solid red;
}

input.invalid + .error-message {
  display: initial;
}

.error-message {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="some-number">