Vue 3中如何禁止用户在数字输入框输入小于1的数值

原生type="number"输入框的min属性仅对步进按钮调整、表单原生提交校验生效，不会拦截用户手动输入的内容，要彻底禁止输入小于1的数值，可以参考以下实现方式：

• 核心方案：双向绑定+值合法性校验修正（必做，100%兜底）
  利用Vue的双向绑定，在值更新时直接修正非法值，从数据源层面保证合法性，不受输入方式影响（键盘输入、粘贴、输入法输入都能覆盖）。
  完整示例代码：

  <template>
    <input
      v-model.number="count"
      type="number"
      min="1"
      @input="validateValue"
    />
  </template>
  
  <script setup>
  import { ref } from 'vue'
  // 初始值设为合法最小值
  const count = ref(1)
  
  const validateValue = () => {
    // 空值、非数字、小于1的情况统一修正为1
    if (typeof count.value !== 'number' || count.value < 1) {
      count.value = 1
    }
  }
  </script>
  

  这里v-model.number修饰符会自动把输入的字符串内容转为数字类型，避免字符串比较出现逻辑错误，保留min="1"属性可以继续约束步进按钮的调整范围，不需要额外写步进逻辑。

• 体验优化：可选加按键拦截
  如果想减少用户输入无效内容的操作，可以额外加keydown事件拦截，提前禁止输入负号、首位0这类必然会导致值非法的按键：

  const handleKeydown = (e) => {
    // 禁止输入负号
    if (e.key === '-') return e.preventDefault()
    // 输入框为空或当前值是1时，禁止输入0，避免出现0、10这类需要二次判断的情况
    if (e.key === '0' && (!e.target.value || Number(e.target.value) === 1)) {
      e.preventDefault()
    }
  }
  

  注意：这个方案只能拦截物理键盘的按键输入，对粘贴内容、输入法联想输入、控制台修改DOM赋值等场景无效，绝对不能单独使用，必须搭配上面的值校验修正逻辑。

• 体验备选：失焦兜底校验
  如果不想在用户输入过程中强制修改值打断输入节奏，可以把校验逻辑移到blur失焦事件触发，用户输入过程中不做干预，输入完成离开输入框时再修正非法值，体验更自然：

  <input
    v-model.number="count"
    type="number"
    min="1"
    @blur="validateValue"
  />
  

注意：所有输入限制的核心是校验绑定的数据源，而非拦截输入动作，只靠拦截按键、拦截粘贴这类前端交互限制永远有被绕过的可能，只要保证最终绑定的值永远符合规则，就能彻底满足需求。

内容的提问来源于stack exchange，提问作者JS_is_awesome18