Vue limits the input box to only enter N integers and 2 decimals

Regarding the digital verification code in the input, the input of the element plug-in is used, and there is an @input event
Insert picture description here
that triggers an event when the input value changes. So the code is as follows

<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位正整数
},

If you don’t use the @input event, you can also choose to monitor in the watch of vue, and the effect is the same.

Guess you like

Origin blog.csdn.net/weixin_43236062/article/details/106647401