如何使Vue js vuetify输入只允许小数点前3位和小数点后2位答案

【问题标题】：如何使Vue js vuetify输入只允许小数点前3位和小数点后2位
【发布时间】：2022-01-23 15:16:07
【问题描述】：

我需要将输入的总数限制为3。例如，用户可以输入333，123等。但是，如果他们使用小数点，他们将允许输入小数点后2位.所以，这些输入是有效的：

123

123.33

这是我目前写的代码：

isNumber (event, message) {
  // preventing multiple decimal
  if (!/\d/.test(event.key) && (event.key !== '.' || /\./.test(message))) {
    return event.preventDefault()
  }

  // limiting three numbers before decimal point and two digits after decimal point
  if (/^(\d{0,3}\.)?\d{1,2}$/.test(message)) return event.preventDefault()
 
}

但是，这个正则表达式 /^(\d{0,3}\.)?\d{1,2}$/ 不适用于我的情况

CodePen Demo

【问题讨论】：

标签： javascript regex vue.js vuetify.js

【解决方案1】：

您可以考虑使用数字输入 (<input type="number">)，使用 max 属性来控制位数，并使用小型 keyup 处理程序来控制值。

document.addEventListener('keyup', handle);

function handle(evt) {
  if (evt.target.id === `num`) {
    if (evt.key === `Backspace`) { return true; }
    const [number, int] = [parseFloat(evt.target.value), parseInt(evt.target.value)];
    evt.target.value = number > evt.target.max 
      ? evt.target.max : number === int 
        ? int : number.toFixed(2);
    document.querySelector(`#value`).textContent = `current value: ${evt.target.value}`;
  }
}

<input id="num" type="number" step="0.1" max="999.99">
<div id="value"></div>

【讨论】：

实际上，我必须使用 vuetify，因为该框架已在我现有的项目中使用。
可以在 vuetify 中创建数字输入字段。见this Pen

【解决方案2】：

您可以使用以下正则表达式：

^\d{0,3}(?:\.\d{1,2})?$

要记住的是使小数部分（包括.）成为可选的。

Demo

【讨论】：

这个正则表达式作为我使用的正则表达式在 regex101 中工作。但是，这些都不适用于我的 Vuetify 项目/CodePen 演示
@user1896653 您的正则表达式不适用于所有情况：regex101.com/r/Gz3iux/7
好的，知道了；谢谢。但是，它需要在项目中工作。