侧边栏壁纸
博主头像
M酷博主等级

祝君一帆风顺 ⛵️⛵️⛵️

  • 累计撰写 40 篇文章
  • 累计创建 36 个标签
  • 累计收到 240 条评论

目 录CONTENT

文章目录

限制 el-input 只能输入数字

M酷
2021-04-16 / 1 评论 / 6 点赞 / 3,015 阅读 / 3,989 字 / 正在检测是否收录...

背景:

在日常项目开发过程中,我们经常会用到 ElementUI 这个组件库,其中的 el-input 组件很好用,但是没有对数字的进行限制的功能,特别是有的项目中需要限制只能填写数字,不能为负数,不能有多个小数点,小数位多少,整数位多少等等。这些需求下,组件默认的功能就很难满足了,需要专门写代码来控制。

为了减少开发成本,提高工作效率,我整理了如下2种方法,大家可以根据实际情况使用,以下方法仍旧适用普通 input 标签。


方法一

使用行内正则控制。

oninput ="value=value.replace(/[^\d]/g, '')" // 只能输入数字(正整数)
oninput ="value=value.replace(/[^\-\d]/g, '')" // 只能输入数字(包含正负数)
oninput ="value=value.replace(/[^\-\d.]/g, '')" // 只能输入数字和小数
oninput ="value=value.replace(/[^\d.]/g, '').replace(/^(\d+)\.(\d\d).*$/, '$1.$2')" // 只能输入数字和小数,只保留一个小数点
oninput ="value=value.replace(/[^\-\d.]/g, '').replace(/^(\-)*(\d+)\.(\d+).*$/, '$1$2.$3')" // 只能输入数字和小数,只保留一个小数点(包含负数)
oninput ="value=value.replace(/[^\-\d.]/g, '').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')" // 只能输入数字和小数,只保留一个小数点,只保留2位小数(包含负数)
oninput ="value=value.replace(/[^\-\d.]/g, '').replace(/^(\-)*(\d+)\.(\d${3}).*$/, '$1$2.$3')" // 只能输入数字和小数,只保留一个小数点,只保留3位小数(包含负数)
oninput ="value=value.replace(/[^\-\d.]/g, '').replace(/(\.)(\d*)(\1*)/g,'$1$2').replace(/^(\-)*(\d+)\.(\d{2}).*$/, '$1.$2')" // 【终极】只能输入数字和小数,只保留一个小数点,只保留3位小数(包含负数)

使用示例:

<el-form-item label="角色Id">
  <el-input type="text" size="small" width="50" v-model="param.roleId" placeholder="请输入数字" oninput="value=value.replace(/[^\d]/g,'')">
</el-form-item>
<el-input v-model="money" oninput ="value=value.replace(/[^\d.]/g,'')">
	<span slot="suffix">/ 元 </span>
</el-input> 

方法二(推荐👉)

使用封装的通用方法进行更细粒度的统一控制,可单独控制整数位和小数位个数。

主要做了如下限制:

  • 限制只能填写数字类型;
  • 限制整数和小数位数;
  • 限制只有一个小数点;
  • 限制不能以小数点开头;
  • 限制整数不出现00的情况;

通用方法 CheckNum 源码:

!!这里挂载到window对象上,为了后面方便使用,记得及时清理不用的全局变量,可以在 beforeDestory 生命周期中直接把变量赋值为 null 来清除引用。

/*
 *@name: checkNum
 *@param: intNum表示整数位个数, 默认0为不限制
 *@param: decNum 表示小数位个数,默认0为没小数
 *@desc:用于限制 input 输入的数字位数(包含小数位)
*/
window.checkNum = (obj, intNum = 0, decNum = 0) => {
  var value = obj.value
  var changeValue, t1, t2
  if (decNum === 0) {
    value = value.replace(/[^\d]/g, '') // 去除数字以外的字符,若要支持负数,可将此处正则改为/[^\-\d]/g
    value = value.replace(/^0\d+/g, '0') // 防止整数位出现'00'的情况

    obj.value = value
    if (intNum !== 0) {
      value = value.substr(0, intNum)
    }
  } else {
    value = value.replace(/[^\d.]/g, '') // 去除数字和小数点以外的字符,若要支持负数,可将此处正则改为/[^\-\d.]/g
    value = value.replace(/^[^\d]/g, '') // 保证第一个字符是数字,若要支持负数,可将此处正则改为/^[^\-\d]/g
    value = value.replace(/\.{2}/g, '.') // 去除第二个小数点
    value = value.replace(/^0\d+/g, '0')
    changeValue = value.split('.')
    if (changeValue.length > 1) {
      // 表示用户输入的既有整数又有小数
      if (intNum === 0) {
        t1 = changeValue[0]
      } else {
        t1 = changeValue[0].substr(0, intNum)
      }
      t2 = changeValue[1].substr(0, decNum)
      value = t1 + '.' + t2
    } else {
      if (intNum !== 0) {
        value = value.substr(0, intNum)
      }
    }
  }
  if (obj.value !== value) {
    obj.value = value
  }
  return value
}

使用示例:

<el-form-item label="角色Id">
  <el-input type="text" size="small" width="50" v-model="param.roleId" placeholder="请输入数字" oninput="checkNum(this, 4, 1)">
</el-form-item>

记得及时清除引用

beforeDestroy() {
    window.checkNum = null
}

表单验证场景

像上面那样使用的话,如果你的表单有验证或者是动态表单的情况下可能会有 bug,导致表单验证状态不对。
因为绑定的原生 input 事件没有去更新表单里绑定的字段,导致 vue 这边不知道值变了,也就无法触发 el-form 再执行一次验证,此时可以像下面这样用。

在你的 vue 文件的 methods 中加入一个方法,包装一下 checkNum 方法,手动更新一下表单里绑定的值,当然你也可以把 checkNum 直接搬过来,下面是相关代码(你也可以直接放到 mixin 中,在多个页面使用)。

import { checkNum } from '@/utils/common'

export default {
  methods: {
    // 校验 el-input 仅填写数字
    validateNum(e, row, field) {
      const value = checkNum(e.target || e.srcElement)
      row[field] = value !== '' ? +value : '' //  注意为空的时候不要转数字
    }
  }
}

模板中像下面这样使用即可:

<el-form-item
	:prop="`tableData[${scope.$index}].number_of_posts`"
	:rules="rulesTable.number_of_posts"
>
	<el-input
		size="small"
		@input.native="
		validateNum($event, scope.row, 'number_of_posts') "
		v-model.number="scope.row.number_of_posts"
	/>
</el-form-item>

参考:

replace 正则表达式,N位小数点
input框只能输入数字及一位小数点
对输入框的整数位数和小数位数做限制

6
广告 广告

评论区