如何在“实时”中检查输入内容 [英] How to check contents of input in "real time"

问题描述

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

I'm working on a web form and it's been set up with a text field to receive what is expected to be a numeric value. The form won't submit if the contents of this field aren't numeric but there was no error message put in place to let the user know that they filled this field out wrong.

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

My question is...is there a way in real time to check what's in the input and do something to tell the user they aren't filling it out properly? If everything is ok I want the border of the input to be green, if not then make the border red and change the default text of the input to tell them we only want numbers.

到目前为止，我的起点很宽松......

This is loosely what I've got so far as my starting point...

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）

I've borrowed the basic principle of the validation from this previously asked question: Check If only numeric values were entered in input. (jQuery)

非常感谢任何帮助。

推荐答案

您可以使用输入事件进行更改当用户在字段内键入时。在change事件中，您将获得与事件监听器所附加的input元素对应的元素 event.target 。使用此引用，您可以使用元素上的值属性获取输入值。

You can use the input event to get changes when the user is typing inside of the field. On the change event you will be given the element corresponding to the input element the event listener is attached to as event.target. Using this reference you are able to get the value of the input by using the value property on the element.

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

After you have retrieved the value you will need to verify that it is in fact numerical. Thankfully jQuery provides a method called isNumeric that allows us to do just that.

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

Once we've established the fact that the value is indeed numerical you can either apply a class or just set the style to what you want to be. Make sure you also check if the value has been emptied so the user does not get confused.

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

As for the validation message - it's not a good idea to set the value of the input as the user is interacting with said element. Instead I've chosen to add textual element to represent the message that will be shown conditionally based on the validation state.

// 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">

这篇关于如何在“实时”中检查输入内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！