Question

如果用户在<input type=number>中输入无效值（例如：“ 1.2.3”），则Chrome和Firefox会将<input>的{{1}}属性报告为{{1 }}，而不是value。

那么，如何判断用户在""中输入了无效数字还是将其留空？

我尝试使用"1.2.3"属性，但在两种情况下均为<input>。

valueAsNumber

NaN

Answer 1

您的输入元素具有实现ValidityState接口的validity属性：

ValidityState {
  badInput: true,
  customError: false,
  patternMismatch: false,
  rangeOverflow: false,
  rangeUnderflow: false,
  stepMismatch: false,
  tooLong: false,
  tooShort: false,
  typeMismatch: false,
  valid: false,
  valueMissing: false
}

从这里您可以研究所有有效性状态（valueMissing，badInput等）

您可以使用document.querySelector获得对您的输入的引用。

在您的情况下，空输入将设置valueMissing标志，而“ 1.2.3”输入将设置badInput标志。

Answer 2

根据对此question的回答，除非它是有效的数字输入，否则将无法获得类型为number的输入字段的值。

另一方面，您可以改为输入text类型的输入字段，并借助正则表达式进行验证，如下所示：

window.onload = ()=>{
  let numBox = document.getElementById('number-box');
  let button = document.getElementById('show-value');
  let pattern = /^\d*(\.\d+)?$/;
  numBox.addEventListener('input', function(){
    if(pattern.test(this.value) && this.value !== ''){
      console.log('valid');
    }
    else {
      console.log('invalid!');
    }
  });
  button.addEventListener('click', ()=>{
    alert(`The current value in the input field is ${numBox.value}`);
  });
};

<input type="text" id="number-box">
<input type="button" id="show-value" value="Show Value">

另外，这是working example：）

Answer 3

您可以使用jquery $。isNumeric（）函数进行数字验证，如下所示。

function showInputValue() {
    const inputValue = document.getElementById("numberInput").value;
    //const inputValueAsNumber = 
    //document.getElementById("numberInput").valueAsNumber;

    if(inputValue !== '' && $.isNumeric(inputValue))
       {
         alert("number is ok");
        }
    else if(inputValue  == '')
        {
         alert("input is empty");
        }
   else {
        alert("Number is invalid");
        }
   }

如何判断<input type =“ number” />是空白还是具有无效值？

3 个答案: