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)
},

以上关于Vue前端实现 el-input 输入时限制输入位数以及输入规则的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。