字数监控，价格监控等

最新推荐文章于 2022-05-17 11:56:46 发布

原创最新推荐文章于 2022-05-17 11:56:46 发布 · 4.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#字数限制 #小数点后两位

前端同时被 2 个专栏收录

45 篇文章

订阅专栏

37 篇文章

订阅专栏

本文介绍了一种在前端开发中对textarea输入进行字数监控的方法，通过节流技术提高性能，并展示了如何确保合同价格输入为小数点后两位的有效数字。这些技巧对于优化用户体验和数据有效性验证至关重要。

1.textarea输入字数监控（在watch里可监控，但有些耗费性能，所以节流）

<div class="gorder-note">
   <label>备注 &nbsp;&nbsp;
      <span style="color:#777;font-size: 14px"> {{remarkLen}}/65</span>
   </label>
   <textarea placeholder="请输入备注.." v-model="remark" @input="descInput"></textarea>
    <!--跳转前存,回来的时候再取--> 
</div>



/*备注输入字数监控*/
descInput() {
  let val = this.remark.length;
  this.remarkLen = val;
  if (val > 65) {
    this.remark = this.remark.substring(0, 65);
    this.remarkLen = this.remark.length;
  }
},

2.价格监控（小数点后两位）

<div>
   <label>合同价格(元)<span>*</span></label>
   <input type="text" placeholder="请输入" v-model="contractPrice" @blur="compInput">
</div>


  /*合同价格输入监控*/
// 小数点后两位
 compInput() {
   let re = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/;
   if (!!this.contractPrice || this.contractPrice === 0) {
      if (!re.test(this.contractPrice)) {
         this.$toast("请输入正确价格");
         this.contractPrice = "";
      }
   }else{    // 针对iOS做空处理
     this.contractPrice = "";
    }
 },