vue.js v-model on input 无法区分空输入和无效输入答案

【问题标题】：vue.js v-model on input can not differentiate between empty input and invalid inputvue.js v-model on input 无法区分空输入和无效输入
【发布时间】：2020-11-21 16:33:06
【问题描述】：

我正在尝试验证通过 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>

我很感激一个提示。谢谢

【问题讨论】：

您在哪里执行验证？您是否依赖浏览器来做到这一点？否则，请查看 Vee-validate 或 vuelidate
我更新了问题。我想在组件中验证它，然后通过自定义事件将它发送给父级。我希望我的问题变得更清楚。关键是，无效输入和空输入的预算都是“”。

标签： vue.js v-model

【解决方案1】：

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

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

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

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

【讨论】：

这一切都不令人满意，因为并没有阻止输入前导零（即使它们因为 v-model.number 而被削减了 parseFloat() ）。无论如何，我希望输入严格可靠，因此我最终进行了自定义检查，您可以在我的解决方案中看到。

【解决方案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>

【讨论】：