input输入限制

input的限制只能输入数字的小需求：

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

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

方法一：使用行内正则控制

方法二：使用封装的通用方法进行更细粒度的统一控制，可单独控制整数位和小数位个数。（推荐使用）

主要做了如下限制：

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

上代码：

<template>
  <div id="app">
    <el-form>
      <!-- 方法一：使用行内正则控制 -->
          <el-form-item label="输入各种数字--只能输入数字(正整数)">
            <el-input 
              type="text" 
              size="small" 
              width="50" 
              v-model="param.roleId1" 
              placeholder="请输入数字"
              clearable
              style="width:160px"
              oninput ="value=value.replace(/[^\d]/g, '')">
            </el-input>
          </el-form-item>

          <el-form-item label="输入各种数字--只能输入数字（包含正负数）">
            <el-input 
              type="text" 
              size="small" 
              width="50"
              clearable
              style="width:160px" 
              v-model="param.roleId2" 
              placeholder="请输入数字"
              oninput ="value=value.replace(/[^\-\d]/g, '')">
            </el-input>
          </el-form-item>

          <el-form-item label="输入各种数字--只能输入数字和小数">
            <el-input 
              type="text" 
              size="small" 
              width="50" 
              clearable
              style="width:160px"
              v-model="param.roleId3" 
              placeholder="请输入数字"
              oninput ="value=value.replace(/[^\-\d.]/g, '').replace(/\.{2}/g, '.')">
            </el-input>
          </el-form-item>

          <el-form-item label="输入各种数字--只能输入数字和小数，只保留一个小数点">
            <el-input 
              type="text" 
              size="small" 
              width="50" 
              clearable
              style="width:160px"
              v-model="param.roleId4" 
              placeholder="请输入数字"
              oninput ="value=value.replace(/[^\d.]/g, '').replace(/^(\d+)\.(\d).*$/, '$1.$2').replace(/\.{2}/g, '.')">
            </el-input>
          </el-form-item>

          <el-form-item label="输入各种数字--只能输入数字和小数，只保留一个小数点(包含负数)">
            <el-input 
            type="text" 
            size="small" 
            width="50" 
            clearable
            style="width:160px"
            v-model="param.roleId5" 
            placeholder="请输入数字"
            oninput ="value=value.replace(/[^\-\d.]/g, '').replace(/^(\-)*(\d+)\.(\d+).*$/, '$1$2.$3').replace(/\.{2}/g, '.')">
            </el-input>
          </el-form-item>

          <el-form-item label="输入各种数字--只能输入数字和小数，只保留一个小数点，只保留2位小数(包含负数)">
            <el-input 
              type="text" 
              size="small" 
              width="50" 
              clearable
              style="width:160px"
              v-model="param.roleId6" 
              placeholder="请输入数字"
              oninput ="value=value.replace(/[^\-\d.]/g, '').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/\.{2}/g, '.')">
            </el-input>
          </el-form-item>

          <el-form-item label="输入各种数字--只能输入数字和小数，只保留一个小数点，只保留3位小数(包含负数)">
            <el-input 
              type="text" 
              size="small" 
              width="50"
              clearable
              style="width:160px" 
              v-model="param.roleId7" 
              placeholder="请输入数字"
              oninput ="value=value.replace(/[^\-\d.]/g, '').replace(/^(\-)*(\d+)\.(\d${3}).*$/, '$1$2.$3').replace(/\.{2}/g, '.')">
            </el-input>
          </el-form-item>

          <el-form-item label="输入各种数字--【终极】只能输入数字和小数，只保留一个小数点，只保留3位小数(包含负数)">
            <el-input 
              type="text" 
              size="small" 
              width="50"
              clearable
              style="width:160px" 
              v-model="param.roleId8" 
              placeholder="请输入数字"
              oninput ="value=value.replace(/[^\-\d.]/g, '').replace(/(\.)(\d*)(\1*)/g,'$1$2').replace(/^(\-)*(\d+)\.(\d{2}).*$/, '$1.$2').replace(/\.{2}/g, '.')">
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-input v-model="money" οninput="value=value.replace(/[^\d.]/g,'')">
              <span slot="suffix">/ 元 </span>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-form-item label="输入数字自定义参数设置就行">
              <el-input 
                type="text" 
                size="small" 
                width="50"
                clearable
                style="width:160px" 
                v-model="param.rolenum" 
                placeholder="请输入数字"
                οninput="checkNum(this, 4, 2)">
              </el-input>
            </el-form-item>
          </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: { },
  data() {
    return {
      money: "",
      param: { 
        roleId1: "",
        roleId2: "",
        roleId3: "",
        roleId4: "",
        roleId5: "",
        roleId6: "",
        roleId7: "",
        roleId8: "",
        rolenum: "" },
    }
  },
  created() {

  },
  mounted() {

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

  },
  beforeDestroy() {
    window.checkNum = null
}
}
</script>
<style>
</style>