vue限制输入框只能输入N位整数和2位小数
关于input里的数字校验代码,采用的是element插件的input,有个@input事件
在 Input 值改变时触发事件。因此代码如下
<el-form-item label="价格" prop="market_price">
<el-input placeholder="0.00" :disabled="check_list.length>0" v-model="info.market_price" @input="changePrice('market_price')">
<template slot="append">¥</template>
</el-input>
</el-form-item>
changePrice(name){
// eslint-disable-next-line no-useless-escape
this.info[name] = this.info[name].replace(/[^\d.]/g,"") //清除非 数字和小数点的字符
this.info[name] = this.info[name].replace(/\.{2,}/g,".") //清除第二个小数点
this.info[name] = this.info[name].replace(/^\./g,""); //验证第一个字符是数字而不是字符
this.info[name] = this.info[name].replace(".","$#$").replace(/\./g,"").replace("$#$",".");
// eslint-disable-next-line no-useless-escape
this.info[name] = this.info[name].replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //保留两位小数
this.info[name] = this.info[name].indexOf(".") > 0? this.info[name].split(".")[0].substring(0, 7) + "." + this.info[name].split(".")[1]: this.info[name].substring(0, 7); //限制只能输入7位正整数
},
如果不采用@input事件的话,也可以选择在vue的watch里面监听,效果也是一样的
还没有评论,来说两句吧...