vue 使用rules校验表单输入框是否为数字

在Vue中，可以使用Element UI库或者自定义的验证规则来自定义表单输入框的数字校验。以下是使用Element UI的`v-model.number`属性和`validate`函数的一个简单示例：

<template>
  <el-form :model="form" :rules="{ numberField: { required: true, type: 'number', message: '请输入数字' } }">
    <el-form-item label="数字字段">
      <el-input v-model.number="form.numberField"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        numberField: ''
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单有效，处理数据...
          console.log('表单提交');
        } else {
          console.log('表单验证失败');
        }
      });
    }
  }
};
</script>

在这个例子中，`v-model.number`会确保用户输入的是数字，并且`rules`配置中的`type: 'number'`会在验证阶段检查输入是否为数字。如果输入不是数字，`message`指定的错误提示将会显示。

如果你需要更复杂的校验规则，比如允许整数或小数等，你可以使用正则表达式或者自定义一个验证函数：

methods: {
  validateNumber(value) {
    const isNumeric = /^[-+]?\d*\.?\d+$/; // 自定义的正则表达式
    return isNumeric.test(value);
  }
},
rules: {
  numberField: {
    required: true,
    validator: (value) => this.validateNumber(value),
    message: '请输入有效数字'
  }
}