Element UI el-input 限制只能输入正数，小数点后输入N位(可自定义保留位数)

最新推荐文章于 2024-08-26 14:29:06 发布

前端攻城狮·左大

最新推荐文章于 2024-08-26 14:29:06 发布

阅读量2k

点赞数 1

分类专栏：原理 JavaScript 文章标签： javascript 正则表达式

本文链接：https://blog.csdn.net/weixin_46719868/article/details/121649455

版权

JavaScript 同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

原理

11 篇文章 0 订阅

订阅专栏

业务实现场景
在这里插入图片描述
HTML部分：
oninput(form.priceRateForeign, 4)
参数1：绑定的值参数2：保留小数的位数

 <el-form-item v-if="qualityQtypeCode == '2'" label="返点:">
          <el-input @keyup.native="form.priceRateReturn = oninput(form.priceRateReturn, 2)" v-model="form.priceRateReturn">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="汇率:">
          <el-input @keyup.native="form.priceRateForeign = oninput(form.priceRateForeign, 4)" v-model="form.priceRateForeign"> </el-input>
        </el-form-item>

JS部分：

 oninput(num, limit) {
      var str = num
      var len1 = str.substr(0, 1)
      var len2 = str.substr(1, 1)
      //如果第一位是0，第二位不是点，就用数字把点替换掉
      if (str.length > 1 && len1 == 0 && len2 != '.') {
        str = str.substr(1, 1)
      }
      //第一位不能是.
      if (len1 == '.') {
        str = ''
      }
      //限制只能输入一个小数点
      if (str.indexOf('.') != -1) {
        var str_ = str.substr(str.indexOf('.') + 1)
        if (str_.indexOf('.') != -1) {
          str = str.substr(0, str.indexOf('.') + str_.indexOf('.') + 1)
        }
      }
      //正则替换
      str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
      if (limit == 1) {
        str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/, '$1') // 小数点后只能输 1 位
      } else if (limit == 2) {
        str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1') // 小数点后只能输 2 位
      } else if (limit == 3) {
        str = str.replace(/^\D*([0-9]\d*\.?\d{0,3})?.*$/, '$1') // 小数点后只能输 2 位
      } else if (limit == 4) {
        str = str.replace(/^\D*([0-9]\d*\.?\d{0,4})?.*$/, '$1') // 小数点后只能输 2 位
      }//如果想自定义小数点后保留的位数请else if 既可
      return str
    },