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

最新推荐文章于 2025-03-07 15:53:14 发布

明天也要努力

最新推荐文章于 2025-03-07 15:53:14 发布

阅读量2.8w

点赞数 19

分类专栏： HTML CSS UI 文章标签：前端 elementui

本文链接：https://blog.csdn.net/ZYS10000/article/details/111119961

版权

HTML CSS UI 专栏收录该内容

31 篇文章

订阅专栏

本文介绍两种方法来验证金额输入是否符合0-255的整数范围：一是利用正则表达式进行验证；二是采用自定义验证规则的方式。这两种方法均可应用于前端表单验证，确保用户输入的数据格式正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<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>