Element-ui 中表单（Form)验证数字值范围（大小）

方法一: 通过正则表达式实现

<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-row>
        <el-col :span="6">
          <el-form-item label="金额" prop="money">
            <el-input v-model.number="ruleForm.money"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" style="text-align:center">
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>  
  </div>
</template>

<script>
  export default {
    
    
    data() {
    
    
      return {
    
    
        ruleForm: {
    
     
          money:'',
        },
        rules: {
    
    
          money:[
            {
    
     required: true, message: '金额不能为空'},
            {
    
     type: 'number', message: '金额必须为数字值'}, // 且不包括小数
            {
    
     pattern: /^([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/, message: '范围在0-255',trigger: 'blur'} 
    		/*
              范围0-255分析：
              0-9：      [0-9]
              10-99：    [1-9]\d
              100-199:   1\d\d
              200-249:   2[0-4]\d
              250-255:   25[0-5]
            */  
          ],
        }
      };
    },
    methods: {
    
    
      submitForm(formName) {
    
    
        this.$refs[formName].validate((valid) => {
    
    
          if (valid) {
    
    
            alert('成功');
          } else {
    
    
            return false;
          }
        });
      },
    }
  }
</script>

补充：正则表达式相关知识点

方法二：自定义校验规则

<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-row>
        <el-col :span="6">
          <el-form-item label="金额" prop="money">
            <el-input v-model.number="ruleForm.money"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" style="text-align:center">
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>  
  </div>
</template>

<script>
  export default {
    
    
    data() {
    
    
      var checkMoney = (rule, value, callback) => {
    
    
        if (!value) {
    
    
          return callback(new Error('金额不能为空'));
        }
        setTimeout(() => {
    
    
          if (!Number.isInteger(value)) {
    
    
            callback(new Error('请输入数字值'));
          } else {
    
    
            if (value < 0) {
    
    
              callback(new Error('范围在0-255'));
            } else if(value > 255){
    
    
              callback(new Error('范围在0-255'));
            }else {
    
    
              callback();
            }
          }
        }, 100);
      };
      return {
    
    
        ruleForm: {
    
     
          money:'',
        },
        rules: {
    
    
          money:[
            {
    
     validator: checkMoney, trigger: 'blur' }
          ],
        }
      };
    },
    methods: {
    
    
      submitForm(formName) {
    
    
        this.$refs[formName].validate((valid) => {
    
    
          if (valid) {
    
    
            alert('成功');
          } else {
    
    
            return false;
          }
        });
      },
    }
  }
</script>

效果