Vuetify如何实现v-text-field禁止输入小于1的数字？

API 探路者

2026-8-28

原因说明

原生HTML <input type="number"> 的min属性不会拦截用户的手动输入行为，它仅在原生表单提交、触发原生校验API、点击输入框自带的上下步进按钮时生效，Vuetify的v-text-field复用了原生input的这一逻辑，因此仅配置min="1"无法阻止用户输入小于1的数值。

可落地的实现方案

Vuetify本身提供了足够的能力实现数值范围限制，以下是3种常用方案，可根据业务场景选择：

方案1：内置规则校验+自动修正（体验最优，推荐）
利用Vuetify自带的rules校验规则给出错误提示，同时监听失焦事件自动修正越界值，兼顾提示清晰度和输入合理性，不会打断用户正常输入节奏：
```
<v-text-field
  v-model.number="numValue"
  type="number"
  min="1"
  :rules="[
    val => (val !== null && val >= 1) || '数值不能小于1'
  ]"
  @blur="val => {
    if (Number(val) < 1) numValue = 1
  }"
></v-text-field>
```

方案2：实时输入拦截（强管控场景）
如果需要完全禁止越界值出现在输入框中，可以在输入事件中直接过滤非法值，注意覆盖空值、非数字等边界情况：

<template>
  <v-text-field
    v-model.number="numValue"
    type="number"
    min="1"
    @input="filterInvalidValue"
  ></v-text-field>
</template>

<script setup>
import { ref } from 'vue'
const numValue = ref(1)
const filterInvalidValue = (val) => {
  if (val === null || val === '' || isNaN(Number(val)) || Number(val) < 1) {
    numValue.value = 1
    return
  }
  numValue.value = Number(val)
}
</script>

方案3：配合步进按钮严格限制
给组件加上step属性，搭配输入修正逻辑，适合只允许整数调整、对输入格式要求严格的场景：
```
<v-text-field
  v-model.number="numValue"
  type="number"
  min="1"
  step="1"
  @input="val => val < 1 ? numValue = 1 : null"
></v-text-field>
```