vue.js 输入的 v-model 无法区分空输入和无效输入

Question

我正在尝试验证通过 v-model 连接到某些数据的输入标签上的某些输入数据（例如数字）。

问题是，如果我有无效数据（例如“1e”），则数据将为“”。空输入显然也是如此。

如何区分空输入或无效输入？

var app = new Vue({
  el: "#app",
  data: {
    budget: "",
  },
  methods: {
    updateBudget() {
      // do some input validation here. E.g.
      if (this.budget === "") {
        console.log("This is triggered on both:");
        console.log("(1) empty input -> budget = ''");
        console.log("(2) invalid input, e.g. -> budget = '1e'");
        console.log("Problem: I can't split this in the above cases!");
      };
    },
  },
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
  <input v-model="budget" type="number" placeholder="Budget" min="0" step="0.01" @input="updateBudget" />
</div>

非常感谢您的提示。谢谢

Answer 1

1e 不是数字（还有 +、-）。输出为空，因为它不是有效数字，尝试插入 1e0 或 -1，您将能够捕获该值。还有一些相关问题：

How to prevent extra characters

要获取准确的数字而不用担心 'e'，请使用内部 Vue 实现。它会处理这种情况。 (v-model.number)

<input
    v-model.number="budget"
    type="number"
    placeholder="Budget"
    min="0"
    step="0.01"
    @input="updateBudget"
/>

顺便说一句，如果你想明确地检查 'e'，我认为最好使用 'type=text'。

Answer 2

我做了一个基于一些正则表达式的自定义解决方案。类似于：

<template>
  <div id="app">
    <input v-model="budget" type="text" @input="validateAndUpdateInput" />
  </div>
</template>

<script>
[...]
methods: {
    validateAndUpdateInput: function() {
      if (!/^-?([0]?|[1-9]{1}\d{0,15})([.]{1}\d{0,2})?$/.test(this.budget)) {
        this.budget = this.previousInput;
        //alert("not valid");
      } else {
        this.previousInput = this.budget;
        this.$emit("update-input", this.budget);
      }
    },
[...]
</script>

vue.js 输入的 v-model 无法区分空输入和无效输入

vue.js v-model on input can not differentiate between empty input and invalid input

vue.js

v-model