用于检查数字值是否为零（而不是空）或更高但不是负数的 Javascript答案

【问题标题】：Javascript to check if a number value is zero (and not null) or above but not negative用于检查数字值是否为零（而不是空）或更高但不是负数的 Javascript
【发布时间】：2019-07-22 21:27:38
【问题描述】：

我正在尝试确定输入到 HTML 输入 (type="number") 中的值是否为零或更高，但不是负数。我正在使用 Vue 执行此操作，并且有以下沙箱示例：

https://codesandbox.io/s/2zxkm6j0vp?fontsize=14

违规代码在“App.vue”文件中。

我有一个名为inputNumber 的data 属性，最初设置为null。有一个输入字段，用户可以在其中输入一个值（该值又被绑定（使用trim 和number 修饰符））到输入。

然后我有一个computed 属性，它返回检查结果 (return Number(this.inputNumber) >= 0。当inputNumber 的值小于0（显示错误）或大于@ 时，这可以正常工作987654332@（显示肯定的结果）。如果输入了0，它应该返回一个肯定的消息，因为这应该是用户可以输入的“金额”。目前输入0时不会显示任何消息。

非常感谢任何帮助。

【问题讨论】：

问题出在哪里？
如果输入零 (0)，它应该返回一个肯定的消息，因为这应该是用户可以输入的“金额”。目前输入零时不显示任何消息。
哦，我明白了。 pfx 答案很好。
我对 VUE 了解不多，但根据您的代码，看起来 view 完全忽略了 0 作为值，因此您的计算函数将 null 作为 this.inputNumber 的值
不要在异地粘贴代码

标签： javascript vue.js numbers

【解决方案1】：

替换

<p v-if="inputNumber && isValid">{{ inputNumber }} is valid</p>

通过

<p v-if="isValid">{{ inputNumber }} is valid</p>

if inputNumber 检查将在 0 时返回 false。

编辑

如下扩展isValid检查，考虑null值和一个空值（当文本字段被清除时）。

computed: {
    isValid() {      
        return (this.inputNumber !== null)  && (this.inputNumber !== '') && (+this.inputNumber >= 0);      
}

<p v-if="isValid">{{ inputNumber }} is valid</p>
<p v-else-if="!isValid">{{ inputNumber }} is not valid</p>

【讨论】：

谢谢，这有点接近了，但如果 inputNumber 的值与最初设置的一样，null 则检查返回 true。

【解决方案2】：

inputNumber 如果在这里等于 0 则为 false：

<p v-if="inputNumber && isValid">{{ inputNumber }} is valid</p>

这就是它不显示的原因。

为了解决这个问题，我们可以将该行替换为

<p v-if="inputNumber !== '' && isValid">{{ inputNumber }} is valid</p>

并用''初始化inputNumber

data() {
  return {
    inputNumber: ''
  }
},

如果我们将其保留为 null，则一旦您输入了一个值并将输入字段清空，inputNumber 将不再为 null，并且“有效”将继续显示。

【讨论】：

是的，成功了，谢谢。将isValid 的返回语句更改为return this.inputNumber !== '' && Number(this.inputNumber) >= 0 也有效。那我就可以离开<p v-if="isValid">{{ inputNumber }} is valid</p>了——这样干净一点。