javascript检查html输入类型号不为空且非数值

Question

我正在尝试验证 html input输入 number不为空，只有数值。两者都必须为真

<input type="number">

if(  node.value !== "" && !node.value.match(/^\d+$/) ){
         error = true
}

这不起作用，因为非数值返回空字符串。

如果我输入 'ffff' 我得到空字符串

如果字段为空，它也返回空字符串

现在代替 node.value !== ""我试试 node.value.length !== 0

如果我输入 'ffff' 我得到 4

如果字段为空，我什么也得不到

问题:如果我输入非数值，如fffff，你能想出一种方法来验证数字类型不为空吗？

Answer 1

要测试输入字段是否包含数值，您可以使用任一方法

let number = parseFloat(yourInput.value);
if(!isNaN(number)) {
}

或

let number = parseInt(yourInput.value, 10);
if(!isNaN(number)) {
}

取决于您想要小数 (parseFloat) 还是整数 (parseInt)。

如果您的输入为空，则两个函数都返回 NaN。

示例片段:

let button = document.getElementById('button');
let input = document.getElementById('input');

button.addEventListener('click', function() {

  console.clear();
  
  let numberInt = parseInt(input.value, 10);

  if (!isNaN(numberInt)) {
    console.log('Input contains an int: ' + numberInt);
  } else {
    console.log('Input does not contain an int: ' + numberInt);
  }
  
  
  let numberFloat = parseFloat(input.value);
  
  if (!isNaN(numberFloat)) {
    console.log('Input contains a float: ' + numberFloat);
  } else {
    console.log('Input does not contain a float: ' + numberFloat);
  }
  
});

<input type="text" id="input">
<button type="button" id="button">Check</button>

我在这里使用了文本输入，因为在某些浏览器中，即使输入的类型为“数字”，您仍然可以输入非数字值。因此，您应该始终通过 JavaScript 验证输入，而不是依赖于“数字”类型。