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里面监听,效果也是一样的

猜你喜欢

转载自blog.csdn.net/weixin_43236062/article/details/106647401
今日推荐