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

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

我的问题是……有没有一种方法可以实时检查输入中的内容并做些什么来告诉用户他们没有正确地填写它？ 如果一切正常，我希望输入的边框为绿色，如果没有，则将边框设置为红色并更改输入的默认文本，告诉他们我们只需要数字。

这是我迄今为止的起点……

HTML：

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

我从前面提到的问题中借用了validation的基本原理： 检查如果输入中只输入了数值。 （jQuery的）

任何帮助是极大的赞赏。

Answer 1

当用户在字段内键入时，您可以使用输入事件来获取更改。 在change事件中，您将获得与事件侦听器作为event.target附加的input元素对应的元素。 使用此引用，您可以通过使用元素上的value属性来获取输入的value 。

检索完该值后，您需要validation它实际上是数值。 值得庆幸的是，jQuery提供了一个名为isNumeric的方法，它允许我们这样做。

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

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

 // Add error message element after input. $('#some-number').after('Please enter numbers only!') $('#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; } 

Answer 2

您可以将validation逻辑绑定到类似的按键事件

 $('#target').keydown(function () { // validation }); 

要么

 $("#target").blur(function() { // validation }); 

例：

https://jsfiddle.net/smzob72e/

Answer 3

您可以使用onkeypress事件执行此操作。 每次用户在选择输入框时按下某个键，都会更新输入的值。

例：

 var input = document.getElementById("input-box"); var inputValue = document.getElementById("input-box").value; input.addEventListener("keypress", function() { inputValue = document.getElementById("input-box").value; // do something with it }); 

Answer 4

我会像这样使用Jquery（“input”）：

 $(document).ready(function() { $('#testing') .attr('placeholder', 'Enter Amount') .on("input", function(){ var $this = $(this); var useramount = $this.val(); if($.isNumeric(useramount)){ $this.css("border", "2px solid green !important"); $this.css("background", "green"); } else { $this.css("border", "2px solid red !important"); $this.css("background", "red"); $this.val(""); $this.attr('placeholder', 'Only Numbers Please'); } }); }); 

出于教育目的，背景场比边界更明显。