Vue前端实现 el-input 输入时限制输入位数以及输入规则

前言

前端兼容 el-input 输入时，仅允许输入负号、数字以及小数点，且限制整数位数以及小数位数，且不允许输入除第一个负号以外的其他符号

逻辑梳理

1、使用 element-ui 插件的 el-input 组件作为页面元素，为其绑定 input 事件（我这里是在表格里使用 slot 插入的 input 元素，所以传入参数使用 scope 传入）

2、绑定输入事件，传参给工具函数，等待返回值返回

3、传入参数从左到右依次为：

• 输入框正在输入的值 e
• 整数部分最大输入位数限制 intMax（number 类型）：控制最大输入几位，超过此值不可继续输入
• 小数部分最大输入位数限制 dotMax（number 类型）：同上
• 输入框绑定的对象 row：用于对象绑定
• 绑定对象上绑定此输入框的键值 name：用于数据更新

说明：工具函数内部 return ‘0’ 的内容可以根据需求 return 不同数据，这里 return 0 便于判断后续操作是否执行，如果输入不合法字符，直接干掉不合法字符，不需要执行后面逻辑了。

封装工具函数

/* 
  限制输入框只可以输入数字以及负号
  且整数位最大可输入 intMax 位
  小数位最大可输入 dotMax 位
  name：  绑定对象键值
  intMax：整数最大位数
  dotMax：小数最大位数
*/
inputLimit(num, intMax, dotMax, row, name) {
  // 类型过滤
  if(num === undefined || num === null) {
      return '0'
  }
  let next = num + ''
  /* 如果有单位 */
  /* 单位只允许是-，且在第一位 */
  /* 第一位不是-号 则过滤掉所有多余符号*/
  let hasCompany = ( next.indexOf('-') === 0 ) ? true : false
  let res = next.match(/-/g)
  if (hasCompany && res && res.length === 1) {
      /* 负号在第一位，且只有一个负号,正常流程*/
      /* 拿走第一个负号以后需，不允许有其他任何负号 */
      next = next.substring(1)
      /* 如果有小数 */
      if (next.indexOf('.') !== -1) {
          const temp = next.split('.')
          /* 保证 整数部分、小数部分 全部没有怪异符号在中间 */
          const intNum = temp[0].replace(/[^0-9]/g, "") 
          const dotNum = temp[1].replace(/[^0-9]/g, "")
          next = intNum + '.' + dotNum
          this.$set(row, name, next)
      } else {
          /* 如果没有小数 */
          next = next.replace(/[^0-9]/g, "")
          this.$set(row, name, next)
      }
  } else {
      /* 负号不在第一位，或者有其他怪异符号 */
      if (next.indexOf('.') !== -1) {
          /* 如果有小数 */
          const temp = next.split('.')
          /* 保证 整数部分、小数部分 全部没有怪异符号在中间 */
          const intNum = temp[0].replace(/[^0-9]/g, "") 
          const dotNum = temp[1].replace(/[^0-9]/g, "")
          const final = (hasCompany ? '-' : '' ) + intNum + '.' + dotNum
          this.$set(row, name, final)
          return '0'
      } else {
          /* 如果没有小数 */
          const final = next.replace(/[^0-9]/g, "")
          this.$set(row, name, final)
          return '0' // 这里可以根据需求 return 不同数据，这里 return 0 便于判断后续操作是否执行，如果输入不合法字符，直接干掉不合法字符，不需要执行后面逻辑了
      }
  }
  if (next !== '0' && Number(next)) {
    let resNum = ''
    /* 如果有小数 */
    if (next.indexOf('.') !== -1) {
      const arr = next.split('.')
        arr[0] = arr[0].length > intMax ? arr[0].substring(0, intMax) : arr[0]
        if (arr[1] !== '') {
            arr[1] = arr[1].length > dotMax ? arr[1].substring(0, dotMax) : arr[1]
            const result = arr.join('.')
            resNum = Number(hasCompany ? ('-' + result) : result).toFixed(arr[1].length)
        } else {
          const result = arr.join('.')
            resNum = hasCompany ? ('-' + result) : result
        }
        this.$set(row, name, resNum)
        return resNum
    } else {
        /* 如果没小数 一串数字，只需要限制位数*/
        resNum = num.length > intMax ? num.substring(0, intMax) : num
        this.$set(row, name, resNum)
    }
    return resNum
  }
},

如何使用？

HTML 代码：

<el-input
   autofocus
   v-if="scope.row.isActive == true"
   type="text"
   class="column-remark-input"
   v-model.trim="scope.row.adjustAmount"
   placeholder="调整金额（若有）"
   @blur="numberBlur(scope)"
   @input="inputFocus($event, scope.row, scope)"
></el-input>

input 事件调用

/* 输入时 */
inputFocus(e, row, scope) {
  const num = this.inputLimit(e, 12, 2, row, 'adjustAmount')
  console.log(">> num:", num)
},