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

简介: 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>

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

2020062310470442.png

方法二:自定义校验规则

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

效果

2020062310470442.png

传送门:JavaScript中 正则表达式的使用 及 常用正则表达式



相关文章
|
6月前
element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作
element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作
|
4月前
|
前端开发
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
194 6
|
3月前
|
计算机视觉
ElementUI——vue2+element-ui 2.x的动态表格和表单
ElementUI——vue2+element-ui 2.x的动态表格和表单
138 1
|
4月前
element UI 组件封装--搜索表单(含插槽和内嵌组件)
element UI 组件封装--搜索表单(含插槽和内嵌组件)
140 5
|
4月前
|
JavaScript
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
164 5
|
4月前
|
UED
Element UI 一键校验多表单(v-for循环表单,异步校验规则,v-for 中的 ref 属性,避坑 forEach 不支持异步 await )
Element UI 一键校验多表单(v-for循环表单,异步校验规则,v-for 中的 ref 属性,避坑 forEach 不支持异步 await )
54 0
|
4月前
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
172 0
|
JavaScript
vue2.0 + element-ui 实战项目-点击按钮弹出form表单(五)
vue2.0 + element-ui 实战项目-点击按钮弹出form表单(五)
570 0
|
6月前
element-ui中Form表单使用自定义验证规则
element-ui中Form表单使用自定义验证规则
35 0
|
前端开发
前端项目实战玖拾肆react-admin+material ui-踩坑-List的用法之disableAuthentication设置验证
前端项目实战玖拾肆react-admin+material ui-踩坑-List的用法之disableAuthentication设置验证
69 0