elementUI表单使用oninput限制输入数字导致校验有时不通过问题

在Element UI中使用oninput事件限制输入数字时，可能会遇到表单验证不通过的问题。这可能是因为oninput事件触发的过于频繁，导致表单的实时验证无法跟上输入的速度。

解决方法：

1. 使用@input而不是oninput绑定事件，因为Vue的@input是进行了节流处理，可以有效减少验证次数。
2. 如果必须使用oninput，可以在其中加入一个简单的计时器，来限制验证的频率。

示例代码：

<template>
  <el-form :model="form" :rules="rules" ref="myForm">
    <el-form-item prop="number">
      <el-input v-model.number="form.number" @input="onInput"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        number: ''
      },
      rules: {
        number: [
          { required: true, message: '请输入数字', trigger: 'blur' },
          { type: 'number', message: '输入内容不是有效数字', trigger: 'blur' }
        ]
      },
      timer: null
    };
  },
  methods: {
    onInput(event) {
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.form.number = this.form.number.replace(/\D/g, '');
        this.timer = null;
      }, 300); // 可以根据需要调整延迟时间
    },
    submitForm() {
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          alert('验证通过！');
        } else {
          console.log('验证不通过！');
          return false;
        }
      });
    }
  }
};
</script>

在这个示例中，我们使用了Vue的.number修饰符来确保输入的值被转换为数字，并且使用了计时器来限制onInput事件的处理频率，从而减少验证的次数，避免因为验证不能及时跟上输入的速度导致的问题。