vue中el-form输入框校验效果修改

vue中el-form表单校验,有没有实现这种功能的方法:
例:文本框输入范围1-9999,用户输入2345,再输入6时,6不填入文本框,同时文本框变红并提示文本框输入范围1-9999(即保留校验失败的状态)

可以使用el-form的validate方法来实现这种功能。可以在validate方法中添加一个自定义的校验规则,用来检查输入的值是否在1-9999之间,如果不在,则将文本框变红并提示文本框输入范围1-9999

const validateNumberRange = (rule, value, callback) => {
  if (value < 1 || value > 9999) {
    callback(new Error('文本框输入范围1-9999'));
  } else {
    callback();
  }
};
// 使用el-form的validate方法
this.$refs.form.validate(validateNumberRange);