Vue中el-input的相关校验使用场景

1、输入框只能输入数字且第一位不能为小数点，以及只能输入小数点后两位

<el-input v-model="item.amount" type="number" @keyup.native='keyupEvent($event,item.amount)'></el-input>

//只能输入小数点后两位
keyupEvent(e,input){
  e.target.value=e.target.value.replace(/[^\d.]/g, '');
  e.target.value=e.target.value.replace(/\.{2,}/g, '.');
  e.target.value=e.target.value.replace(/^\./g, '0.');
  e.target.value=e.target.value.replace(/^\d*\.\d*\./g, e.target.value.substring(0,e.target.value.length-1));
  e.target.value=e.target.value.replace(/^0[^\.]+/g, '0');
  e.target.value=e.target.value.replace(/^(\d+)\.(\d\d).*$/, '$1.$2');
  input=e.target.value;
},

2、编辑输入框触发事件：比如在输入框1输入内容，同页面某地方需要响应改变的场景（结合计算属性）

<el-input v-model="item.amount" type="number" v-on:input="receiInput(item)"></el-input>

computed: {//计算属性
  computedAmount() {
    return function(oldSum,newSum){
      return oldSum-newSum;
    }
  },
},
methods:{
	receiInput(item){
		this.newTotal=this.computedAmount(item.amount1,item.amount2);
	},
}

3、输入框失去聚焦时触发事件

<el-input v-model="item.amount" type="number" @blur="changeInput(item)"></el-input>

//失去聚焦时响应
changeInput(item){
  //失去聚焦时做的操作
  if(item.amount <=0){
    this.$message.error("商家应收金额需大于0，请重新填写");
  }
},

4、只能输入非负整数和限制数值范围（直接简便使用el-input-number 标签）

<el-input-number 
  v-model="form.gtalalmTime"
  :precision="0" //只能输入整数
  style="width: 50%" 
  controls-position="right" //输入框样式
  :min="0" //最小值
  :max="9999"//最大值
>
</el-input-number>