Vue中el-input的相关校验使用场景
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>
更多推荐
已为社区贡献4条内容
所有评论(0)