vue element input =＞ 只允许数字-保留4位小数-正则校验

<el-input
         v-model="item.data_id"
         placeholder="序号"
         type="number"
         onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )">
</el-input>

这里的 οnkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )" 是为了解决输入框不可以输入e，从而只能输入数字：

此外需要一点css，来让输入框更加完美：

/*------------------------修改type=number的样式------------------------------------------------*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type="number"]{
    -moz-appearance: textfield;
}

这样就解决了上面的问题，输入框只能那个输入数字。

0-1之间的数

onkeyup="value=value.replace(/^[1-9]\d*(\.\d+)?$/,'')"

js的小数位数和保留小数点四位数字等验证

一：自定义规则filter函数式

// 小数验证
function checkingNumber(obj,num) {
    obj.value = obj.value.replace(/[^\d.]/g,""); // 清除"数字"和"."以外的字符
    obj.value = obj.value.replace(/^\./g,""); // 验证第一个字符是数字
    obj.value = obj.value.replace(/\.{2,}/g,"."); // 只保留第一个, 清除多余的
    obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
    if (num == 0){
        obj.value = obj.value.replace(/^0(0+)|[^\d]+/g,'');// 只能整数
    }else{
        // 保存n个小数
         obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d{n}).*$/,'$1$2.$3');         // 只能输入n个小数
    }
    if(obj.value.indexOf(".") < 0 && obj.value !=""){// 此处控制的是以上如果没有小数点，首位不能为类似于 01、02的数值
        obj.value = parseFloat(obj.value);
    }
    obj.value = isNaN(obj.value) ? 0 : obj.value; // 不让显示NAN
}

二： 标签里直接

  <!--小数点后只能输4位-->
              <el-input
                :disabled="disabled"
                @input="scope.row.count=scope.row.count.replace(/^(\-)*(\d+)\.(\d{5}).*$/, '$1$2.$3')"
                v-model="scope.row.count"
              ></el-input>

// 只允许0-1之间 保留最大4位小数
export function checkNumLength(rule, value, callback) {
  console.log(value);
  if (value == null) {
    return callback(new Error('不能为空'))
  } else {
    var reg = /^(0(\.\d{1,4})?|1(\.0{1,4})?)$/g
    // var reg = new RegExp('^(0(\.\d{1,4})?|1(\.0{1,4})?)$');
    if (reg.test(value)) {
      callback()
    } else {
      return callback(new Error('只允许0-1之间,且最大保留4位小数'))
    }
  }
}

保留多少位小数的鼠标失焦控制

// html
<el-input v-model="row.settlementRatio" @blur="handleInput1"  type="number" size="small"  placeholder="请输入"></el-input>
<el-input v-model="row.settlementRatio" @blur="handleInput2"  type="number" size="small"  placeholder="请输入"></el-input>

data() {
	return {
		row {
			settlementRatio: ''
		}
	}
}

methods: {
    handleInput1(e) {
      // 通过正则过滤小数点后四位 d{0,4}  4就代表保留四位小数
      row.settlementRatio = (e.target.value.match(/^\d*(\.?\d{0,4})/g)[0]) || null
    },
     handleInput2(e) {
      // 通过正则过滤小数点后四位 d{0,2}  2就代表保留四位小数
      row.settlementRatio = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
    },
}