字段只接受5个整数＆amp; 2位小数

Question

我想在权重字段中添加一个限制，只接受5个整数＆amp; 2位小数。我试过下面的正则表达式，但面临同样的问题。

/^(\d{1,5})(\.\d{1,2})?$/

字段不应接受第6个整数。

代码：

＆＃13;

＆＃13;

Enter weight:
<input type="text" id="weight" onkeyup="myFunction()">
<script>
  function myFunction() {
    var x = document.getElementById("weight").value;
    var regexp = /^(\d{1,5})(.\d{1,2})?$/g;
    var result = x.match(regexp);
    alert(result);
  }
</script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以尝试这样的事情：

说明：

• 保留变量previousValue以保留最后一个正确的值。默认情况下，它将为空白。
• 验证输入值。如果value不正确，请停止事件并将previousValue设置为输入值。
• 在有效输入时，将当前值设置为先前值。

验证条件：

• 输入必须包含数字（0-9）和十进制（.）;
• 整数部分最多可包含5个数字
• 小数部分最多可包含2个数字

var previousValue = "";
function myFunction(event) {
  this.value = this.value || "";
  if(validateInput(this.value)){
    event.preventDefault();
    this.value = previousValue;
  }
  else{
    previousValue = this.value
  }
}

function validateInput(value){
  var regex = /^[0-9.]*$/;
  var valid = regex.test(value);
  var parts = value.split(".");
  return ( !valid || 
            parts.length > 2 || 
            parts[0].length > 5 || 
            (parts[1] && parts[1].length > 2)
          )
}

function registerEvents(){
  document.getElementById('weight').addEventListener('keyup', myFunction)
}

registerEvents();

Enter weight:
<input type="tel" id="weight" maxlength="8">

指针：

• 如果您已定义最大可能长度，请在输入上使用maxlength来限制用户。
• 使用addEventListener附加事件比在HTML中添加事件更好。
• 它还可以更好地分离验证和处理逻辑。保持代码清洁和可维护。
• 使用type="text"而不是type="tel"。这是针对移动设备的次要优化。它会打开数字键盘。