通常情况下在使用elementUI前端框架的时候，经常会遇到表单要限制输入内容，尤其是数字。

话不多说，代码如下：

   <el-input 
   		v-model="form.plan" 	
   		type="number" 
   		step="0.5" 
   		min="0" 	max="5" 
   		@keyup.native="proving($event)"  
   		@input="editInput($event,'plan')"  
		placeholder="最高5分" 
   		oninput="if(value>5)value=5;if(value<0)value=0"
  	></el-input>

第一个属性：type=“number” input的原生属性，标明input框的类型

第二个属性： step=“0.5” input的原生属性，type=“number” 时生效， 标明输入字段的合法数字间隔（假如 step=“0.5”，则合法数字应该是 -0.5、0、0.5、1，以此类推）

第三个属性： min=“0” max=“5” min 属性规定输入字段所允许的最小值。 max 属性规定输入字段所允许的最大值。 min 属性与 max 属性配合使用，可创建合法值范围。

第四个属性：@keyup.native="proving($event)"

proving(e){
                var val=e.target.value;
                //限制只能输入一个小数点
                if (val.indexOf(".") != -1) {
                    var str = val.substr(val.indexOf(".") + 1);
                    if (str.indexOf(".") != -1) {
                        val = val.substr(0, val.indexOf(".") + str.indexOf(".") + 1);
                    }
                }
                e.target.value = val.replace(/[^\d^\.]+/g,'');

            },

第五个属性：@input="editInput($event,‘plan’)"

editInput(value, name) {
              this.form[name] =
                  ("" + value) // 第一步：转成字符串
                      .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
                      .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
                      .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
                      .match(/^\d*(\.?\d{0,1})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
          },

第六个属性： placeholder=“最高5分” 提示内容

第七个属性：οninput="if(value>5)value=5;if(value<0)value=0"

表示：如果输入内容大于5 ，就输出5 ，如果输入内容小于0 输出0

elementUI中el-input输入数字且保留指定小数位

<!-- 如果需要保留两位小数或者三位小数 只需要将 最后的 +2 改为 +3 即可 以此类推，保留几位小数就 几+1 -->
<el-input type="text" 
  placeholder="请输入保留一位小数的数字"
  v-model="userValue" 
  oninput="if(isNaN(value)) { value = parseFloat(value) } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}" />

因项目需要在此记录下

此文章是我开发过程的一个记录，方便我日后学习和复盘。若能帮到你不胜荣幸。

原文链接：https://blog.csdn.net/weixin_44835297/article/details/111253150