一. 问题

el-input-number 组件添加必填校验和自定义校验函数，手动输入值后，无法及时清除校验提示，必须失去焦点时才会消失。 希望在输入值之后即时清除校验提示。

二. 产生原因

el-input-number 组件在 blur 时，才会调用 change 事件。

三. 解决方案

1. el-input-number

依然使用 el-input-number 组件，需添加 @input 事件，在 input 事件中触发表单校验，例如：

<el-form-item :prop="formState.age" :rules="rules">
  <el-input-number
    v-model="formState.age"
    @input="inputNumberChange"
  ></el-input-number>
</el-form-item>

<script setup>
const rules= [
  {
    message: "请输入",
    required: true
  },
  {
    validator: (rule, value, callback) => {
      if (value && value > 35) {
        return callback(new Error("不能大于35岁"))
      }
      callback()
    },
    trigger: "blur"
  }
]

const inputNumberChange = () => {
  nextTick(() => {
    // formRef 是 el-form 组件的 ref
    formRef.value.validateField("formState.age")
  })
}
</script>

2. el-input

可以参考：Input 数字类型验证

3. 自定义组件

这种情况下，针对 el-input 组件 UI 不能满足要求，可以在 el-input 基础上进行封装。