element-plus表单范围校验

Element Plus是一个基于Vue.js的UI组件库，它扩展了Element UI的功能。其中，对于表单验证，范围校验通常指的是在用户输入值时，确保其满足特定的数值限制。在Element Plus的`el-form`组件中，可以使用`v-model.number`指令结合自定义的验证规则来实现范围校验。

例如，你可以设置一个数字输入框，并通过`min`和`max`属性来指定最小和最大值：

<template>
  <el-form label-width="80px">
    <el-form-item label="数值范围" prop="rangeValue">
      <el-input v-model.number="rangeValue" :min="minVal" :max="maxVal"></el-input>
      <span class="error" v-if="errors.rangeValue">超出范围</span>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      rangeValue: '',
      minVal: 0,
      maxVal: 100,
      errors: {},
    };
  },
  watch: {
    rangeValue(newVal) {
      if (newVal < this.minVal || newVal > this.maxVal) {
        this.errors.rangeValue = '超出范围';
      } else {
        delete this.errors.rangeValue;
      }
    },
  },
};
</script>

在这个例子中，如果用户输入的值小于`minVal`或大于`maxVal`，会显示错误提示。你可以通过修改`watch`监听器来实现更复杂的校验规则。