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中 正则表达式的使用 及 常用正则表达式



相关文章
|
1月前
element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作
element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作
|
7月前
|
JavaScript
vue2.0 + element-ui 实战项目-点击按钮弹出form表单(五)
vue2.0 + element-ui 实战项目-点击按钮弹出form表单(五)
367 0
|
1月前
element-ui中Form表单使用自定义验证规则
element-ui中Form表单使用自定义验证规则
16 0
|
1月前
|
前端开发
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
|
1月前
|
JSON 数据格式
element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现
element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现
|
10月前
|
前端开发
前端项目实战玖拾肆react-admin+material ui-踩坑-List的用法之disableAuthentication设置验证
前端项目实战玖拾肆react-admin+material ui-踩坑-List的用法之disableAuthentication设置验证
51 0
|
10月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件10
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件10
35 0
|
7月前
element-ui中Form表单使用自定义验证规则
element-ui中Form表单使用自定义验证规则
38 1
|
8月前
|
JavaScript
Element-Ui表单移除校验clearValidate和resetFields
添加和修改公用一个弹窗,点击添加弹窗后,如果没移除表单校验的话,再点击修改弹窗时校验就会被记住,所以需要移除校验,但在清空表单校验时会报如下错误: 那么,你只需要加上这段话即可 this.$nextTick(()=&gt;{ this.$refs.addArray.resetFields(); }) 再此,我顺便说一下resetFields和clearValidate的区别: this.$refs.form.resetFields(); //移除表单校验并初始化表单,一般用于.
239 0
Element-Ui表单移除校验clearValidate和resetFields
|
7月前
Element UI 中table的验证
Element UI 中table的验证