控制单个el-input只能输入正整数或小数

1,192 阅读1分钟

原地址:# 控制单个el-input只能输入正整数或小数

<el-input v-model="form.sfplValue1" style="width:140px" @blur="onBlur(form.sfplValue1)"
                                @input="inputChange(form.sfplValue1)">

input事件发生时检测输入字符
blur用来去除以.结尾时末尾的.

 // 禁止输入字母汉字,以及3.3.3或3...3以及00,03形式,只能输入正整数和小数
    inputChange(val) {
      val = val.toString()
      let num
      num = val.replace(/[^\d.]|^\./g, '') // 禁止输入非数字和'.'以及以'.'开头的
      num = num.replace(/^0[0-9]/g, 0) // 开头是0且其后跟的不是'.'替换为0,形如00,01
      num = num.replace(/\.{2,}/g, '.')// 多个'.'相连替换为一个'.'
      if ((val.match(/\./g)) && (val.match(/\./g).length > 1)) { // 当出现3.3...3是时,只保留3.
        let index = val.indexOf('.')
        num = val.slice(0, index + 1)
      }
      this.form.sfplValue1 = num
    },
    // 失去焦点时,去除末尾.
    onBlur(val) {
      let num = val.replace(/\.$/g, '')
      this.form.sfplValue1 = num
    },