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

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

关于input里的数字校验代码,采用的是element插件的input,有个@input事件
在这里插入图片描述
在 Input 值改变时触发事件。因此代码如下

  1. <el-form-item label="价格" prop="market_price">
  2. <el-input placeholder="0.00" :disabled="check_list.length>0" v-model="info.market_price" @input="changePrice('market_price')">
  3. <template slot="append"></template>
  4. </el-input>
  5. </el-form-item>
  6. changePrice(name){
  7. // eslint-disable-next-line no-useless-escape
  8. this.info[name] = this.info[name].replace(/[^\d.]/g,"") //清除非 数字和小数点的字符
  9. this.info[name] = this.info[name].replace(/\.{2,}/g,".") //清除第二个小数点
  10. this.info[name] = this.info[name].replace(/^\./g,""); //验证第一个字符是数字而不是字符
  11. this.info[name] = this.info[name].replace(".","$#$").replace(/\./g,"").replace("$#$",".");
  12. // eslint-disable-next-line no-useless-escape
  13. this.info[name] = this.info[name].replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //保留两位小数
  14. 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位正整数
  15. },

如果不采用@input事件的话,也可以选择在vue的watch里面监听,效果也是一样的

发表评论

表情:
评论列表 (有 0 条评论,114人围观)

还没有评论,来说两句吧...

相关阅读