为 0 到 999 之间的数字或无输入制定 Vuetify 规则

Question

我有规则检查输入中的数字是否在 0 到 999 之间，它工作正常。问题是，如果我输入不正确的值（例如a并将其删除），那么即使输入为空，我仍然会显示错误。

它必须有一些简单的解决方案，我只是现在找不到它。

我只留下了代码的重要部分。

<v-text-field 
type="number"
:rules="numberRule"/>

// Vue component
data: () => ({
numberRule: [v => (!isNaN(parseFloat(v)) && v >= 0 && v <= 999) || 'Number has to be between 0 and 999']
})

Answer 1

上面的代码看起来不错，我已根据您的要求添加了修复程序

工作代码笔：https://codepen.io/chansv/pen/ZEEeVoW?editors =1010

vuetify 文本字段中的规则属性需要一个布尔值或字符串数​​组，如果布尔值为 true，则验证通过，如果找到任何字符串，则显示为错误消息

我已经添加了对numberRule的修复，首先检查该值是否没有输入，它不会显示任何错误消息，然后检查 0-999 的数字，如果通过则没有错误消息，如果两种情况都没有通过，它会显示错误信息

<v-text-field
 label="Regular"
 :rules="[numberRule]"
></v-text-field>

在脚本中：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    numberRule: v  => {
      if (!v.trim()) return true;
      if (!isNaN(parseFloat(v)) && v >= 0 && v <= 999) return true;
      return 'Number has to be between 0 and 999';
    },
  }
})