进行仅允许数字、一个点和两个小数位的输入

Question

有什么方法可以在 javascript 中验证多个输入，以便在每个输入中只允许数字、一个点和两个可选的小数位？

编辑：它应该允许下一个：

• 12.65
• 12.6
• 12.
• 12
• 1

我设法做到了这一点：

<input type="number" onkeypress="return isDecimalKey(event,this)"/>
<input type="text" onkeypress="return isDecimalKey(event,this)"/>
<input type="number" onkeypress="return isDecimalKey(event,this)"/>
<input type="text" onkeypress="return isDecimalKey(event,this)"/>

function isDecimalKey(evt, elem) {

    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57)))
        return false;
    else {
        var dot = 0;
        for (var i = 0; i < elem.value.toString().length; i++) {
            if (elem.value.toString()[i] == 46)
                dot++;
        }
        if (charCode == 46 && dot == 1)
            return false;
    }
    return true;
}

但是效果不佳，我仍然可以插入多个点和2个以上的小数，但只接受数字和点。

Answer 1

试试这个

HTML

<input autofocus pattern="^\d+\.{0,1}\d{0,2}$" required oninput="isDecimalKey(event,this)">

JS

const isDecimalKey = (event,element)=>{
       event.target.setCustomValidity('');
      const patt = /^\d+\.{0,1}\d{0,2}$/;
      let value = event.target.value;
      if(!patt.test(value)){
        event.target.reportValidity();
        element.setAttribute("maxlength",value.length);
      }
      else
      {
        element.removeAttribute("maxlength")
      }
     if(value.length === 0){
        element.removeAttribute("maxlength");
     }
   }

Answer 2

你可以试试：

input type="number" 
step="0.01"
onkeypress={() => { isDecimalKey(event,this) }} 

Answer 3

使用以下正则表达式来验证您的输入值：

[0-9]*\.?[0-9]{2}.test('21.33') //true

[0-9]*\.?[0-9]{2}.test('3333.111') //false