create form number input and validate it

Question

How do I validate a number input field for positive integers correctly? I use these rules

  numberRules: [
    v => v.length > 0 || 'This field may not be empty',
    v => Number.isInteger(v) || 'The value must be an integer number',
    v => v > 0 || 'The value must be greater than zero'
  ]

but get wrong results. I created an example showing my wrong behaviour

https://codesandbox.io/s/vue-with-vuetify-eagles-yqxcc

To modify the textfield as a number input I added type="number" as a component property.

Answer 1

你得到错误的结果，因为v你的规则方法实际上是string（是的，是的，有趣的事实:)）。

你可以：

1. 将您的规则更改为 v => Number.isInteger(Number(v)) || "The value must be an integer number",

2. 将.number修饰符添加v-model=...到看起来像v-model.number=.... 但是在那种情况下，您的第一个规则方法将不起作用，因为v因为 number 没有.length