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

Question

我需要将总输入数限制为 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 演示

Answer 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>

Answer 2

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

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

要记住的是制作小数部分，包括. ， 可选的。

演示