如何“实时"检查输入的内容 [英] 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)

非常感谢任何帮助.

推荐答案

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

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屋！