Question

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

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

这远远不是我的起点......

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

我从前面提到的问题中借用了验证的基本原则： Check If only numeric values were entered in input. (jQuery)

非常感谢任何帮助。

Answer 1

您可以将验证逻辑绑定到像

这样的按键事件

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

或

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

示例：

https://jsfiddle.net/smzob72e/

Answer 2

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

检索完该值后，您需要验证它实际上是数值。值得庆幸的是，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">

Answer 3

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

示例：

＆＃13;

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

＆＃13;

<input id="input-box"/>

＆＃13;

我希望我没有弄错。

Answer 4

使用香草javascript的示例。
每当没有文本值

时，我将其写为禁用“提交”按钮

aws s3 mv s3://bucket/ <local_pc>

Answer 5

我使用Jquery（＆＃34;输入＆＃34;），如下所示：

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

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

如何检查＆＃34;实时＆＃34;

5 个答案: