vue表单验证只能输入数字

### 实现 Vue 表单验证仅限数字输入

为了确保表单中的特定字段只接受数字输入，在 Vue 中可以采用多种方法来实现此需求。一种常见的方式是结合正则表达式与自定义指令或监听器，另一种则是使用专门的库如 Vuelidate 来简化验证逻辑。

#### 使用 v-model 和 input 事件过滤字符

可以直接在组件内处理 `v-model` 绑定的数据变化，并通过 `input` 或者 `change` 事件拦截非法字符：

<template>
  <div class="form-group">
    <label for="numberInput">请输入数字：</label>
    <input id="numberInput" type="text" v-model.lazy.trim="numValue" @input="filterNonNumeric"/>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const numValue = ref('');

function filterNonNumeric(event: Event): void {
  const target = event.target as HTMLInputElement;
  let value = target.value.replace(/[^0-9]/g, '');
  if (value !== target.value) {
    target.value = value; // 更新视图层显示的内容
    numValue.value = value; // 同步到绑定变量
  }
}
</script>

这种方法适用于简单的场景，它能即时阻止非数字键入并保持用户体验流畅[^1]。

#### 利用第三方库 Vuelidate 进行高级验证

对于更复杂的业务逻辑或者希望代码更加模块化的情况下，推荐使用像 Vuelidate 这样的专用插件来进行表单验证。下面是一个基于 Vuelidate 的例子，展示了如何配置规则以限定某个字段只能接收整数类型的数值：

// 安装依赖 npm install @vuelidate/core @vuelidate/validators
import useVuelidate from '@vuelidate/core';
import { required, numeric } from '@vuelidate/validators';

export default {
  data() {
    return {
      formFields: {
        age: ''
      },
      validationRules: {
        age: { required, numeric }
      }
    };
  },
  computed: {
    v$ () {
      return useVuelidate(this.validationRules, this.formFields);
    }
  },
  methods: {
    submitForm() {
      this.v$.touch();
      if (!this.v$.$invalid) {
        console.log('Valid submission');
      } else {
        alert('Invalid Form!');
      }
    }
  }
};

在这个案例里，不仅实现了对年龄字段的必填项以及纯数字校验，还能够方便地扩展其他条件判断，比如范围限制等[^3]。