vue限制输入框只能输入N位整数和2位小数

Love The Way You Lie 2023-02-16 12:01 63阅读 0赞

关于input里的数字校验代码，采用的是element插件的input，有个@input事件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70]  
在 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里面监听，效果也是一样的

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200609173532350.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg==,size_16,color_FFFFFF,t_70