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

Question

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

Answer 1

可以使用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);