el-input 限制 只能输入数字,数字大小,长度,小数点后位数以及字母e的限制

通常情况下在使用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)}" />

因项目需要在此记录下

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

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐