Question

所以我有这个功能：

function inputCheck()
        {
            var check = document.forms["drinkList"]["quant1"].value
            if (isNaN(check))
            {
                window.alert("Input numbers only");
                return false;
            }
        }

我正在使用此代码检查用户是否已将字符输入文本框。如果他们这样做，那么它会显示一条警告，说它只接受数字事实是，我还有11个文本框，我必须运行此功能。

无论如何，我可以让它工作，而无需再创建11个函数吗？

其他文本框名称为：

quant2，
quant3，
quant4，
quant5，
鞭，
奶油，
糖，
巧克力，
caramel2，

注意：我还使用onchange进行实时检查。

Answer 1

对不起，之前没有读清楚。我想这应该做的。

<input onchange="inputCheck(this)">

function inputCheck(elem){
    var check = elem.value;
    if (isNaN(check))
    {
        window.alert("Input numbers only");
        return false;
    }
}

Answer 2

我建议您检查内置功能input type=number

但是，如果你真的想亲自检查一下，你可以这样做：

＆＃13;

user1.books[{bookId : 'id1'}, {bookId : 'id2'}]
user2.books[{bookId : 'id2'}]

＆＃13;

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

function numberOnly() {

  var value = this.value;

  if (!isNumber(value)) {
    console.dir('not a number!'); // replace this with your ALERT
    this.classList.add('error');
  } else {
    this.classList.remove('error');
  }

}

var inputs = document.querySelectorAll('.number-only'); // selects all the inputs that have the class .number-only

[].forEach.call(inputs, function(input) {
  input.addEventListener('keyup', numberOnly); // validate the input using the numberOnly onkeyup
});

＆＃13;

input {
  display: block;
  margin: 5px;
  border: 1px solid #aaa;
  padding: 5px 10px;
}
input.error {
  outline-color: #f00;
  border: 1px solid #f00;
  position: relative;
}

＆＃13;

Answer 3

将事件挂钩到多个输入的更有效方法是将事件挂钩到父（例如，<body>），并检查事件的目标冒泡：

var names = ['quant2', 'quant3', 'quant4', 'quant5', 'whip', 'cream', 'sugar', 'chocolate', 'caramel2'];
document.body.addEventListener('keyup', function (e) {
  // skip event if it was NOT triggered on a matching element
  if (names.indexOf(e.target.name) === -1) { return; }

  // code to process event...
});

as asides：

使用<input type="number">。这是一个由浏览器提供的工具，它将在输入时立即工作，以及其他细节（例如在移动设备上提供仅限数字键盘而不是全键盘）。这是documentation和browser support以供进一步阅读。

Answer 4

为什么不使用jquery，如果添加相同的类，它可以选择所有文本框，例如：nonNumberTextbox。

$("#drinkList .nonNumberTextbox").each(function(index, node) {
    if (isNaN(node.value)) {
        window.alert("Input numbers only");
        return false;
    }
});

Answer 5

在您的代码中isNaN(check)将始终返回false。这是因为.value元素的input属性始终返回一个字符串，并且字符串的isNaN为false。

您需要先将check强制转换为数字，然后再将其传递给isNaN。我建议使用unary operator +。您还需要确保check不为空或全空白字符串，因为一元加号将会将它们强制转换为0。

if (check.trim() === '' || isNaN(+check)) {

另外，根据您的需要，您可以使用parseInt或parseFloat在解析空白或空白字符串时返回NaN。

if (isNaN(parseInt(check, 10))) { // if only integers are allowed
}

if (isNaN(parseFloat(check))) { // if integers and decimals are allowed
}

另一种替代方法是使用regular expression来验证字符串而不强制。

if(!/^\d+$/.test(check)) { // if the number needs to be an integer
}

if(!/^\d+(?:\.\d*)?$/.test(check)) { // if the number can be an integer or a decimal
}

Answer 6

尝试这是否有效

var textboxes = ['quant2', 'quant3', 'quant4', 'quant5', 'whip', 'cream', 'sugar', 'chocolate', 'caramel2'];

for (var i = 0; i < textboxes.length; i++ ){
  var check = document.forms["drinkList"][textboxes[i]].value;
  if (isNaN(check)){
    window.alert("Input numbers only");
    break;
  }
}

如何检查用户是否输入了非数字

6 个答案: