elementui之el-input输入框内容限制

限制仅能输入数字，整数不得超过2位，小数不得超过2位

<template>
  <div class="content-box">
    <div class="container">
      <div>输入框限制数字,限制整数不得超过2位，小数不得超过2位</div>
      <el-input
        v-model.trim="iptNum3"
        placeholder="请输入该内容分值"
        @input="limitIptNumber()"
      ></el-input>
       {{ iptNum3 }}
    </div>
  </div>
</template>

<script>

export default {
  name: 'record',
  components: {},
  props: {},
  data() {
    return {
      iptNum3: "",
    }
  },
  created() {
    console.log('created-record')
  },
  activated() {
    console.log('activated-record')
  },
  deactivated() {
    console.log('deactivated-record')
  },
  methods: {
    limitIptNumber(){
      var str = this.iptNum3
      var len1 = str.substr(0, 1)
      var len2 = str.substr(1, 1)
      var len3 = str.substr(2, 1)
      // 整数为两位后面限制输入清空
      if(len1 != 0 && len3 !== '' && len3 !== '.'){
        this.iptNum3 = str.substr(0, 2)
        return 
      }
      // 如果第一位是0，第二位不是点，就用数字把点替换掉
      if (str.length > 1 && len1 == 0 && len2 != ".") {
        str = str.substr(1, 1)
      }
      // 限制只能输入一个小数点
      if (str.indexOf(".") != -1) {
        var str_ = str.substr(str.indexOf(".") + 1)
        if (str_.indexOf(".") != -1) {
          str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
        }
      }
      // 正则替换 限制输入框小数点位数，多出的过滤掉
      str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
      str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1') // 小数点后只能输 2 位
      this.iptNum3 = str
    }
  }
}
</script>

<style  lang="scss" scoped>
</style>

效果如下

限制输入数字1到3位数字（0-100）

<el-input
    v-model.number="checkForm.submit"
    maxlength=3
    minlength=1
    placeholder="请输入"
    style="width: 85px"
    @input="v => checkForm.submit = v.replace(/[^\d]/g,'')"
 ></el-input>

限制仅能输入数字和逗号

<template>
  <div class="content-box">
    <div class="container">
      <div>输入框限制数字,限制整数不得超过2位，小数不得超过2位</div>
      <el-input
        v-model.trim="iptNum3"
        placeholder="请输入该内容分值"
        @input="limitIptNumber()"
      ></el-input>
       {{ iptNum3 }}
    </div>
  </div>
</template>

<script>

export default {
  name: 'record',
  components: {},
  props: {},
  data() {
    return {
      iptNum3: "",
    }
  },
  created() {
    console.log('created-record')
  },
  activated() {
    console.log('activated-record')
  },
  deactivated() {
    console.log('deactivated-record')
  },
  methods: {
    limitIptNumber(){
      var str = this.iptNum3
      // 正则替换 限制输入框数字和英文小数点，多出的过滤掉
      str = str.replace(/[^\d^\,]+/g, '') // 保留数字和逗号
      this.iptNum3 = str
    }
  }
}
</script>

<style  lang="scss" scoped>
</style>

限制仅能输入数字和字母，汉字不可以

<el-input
   v-model="checkForm.projectCode"
   placeholder="请输入项目编号"
   style="width:260px"
   @input="checkForm.projectCode = checkForm.projectCode.replace(/[^\w\\]/g,'')"
></el-input>

限制仅能输入数字和字母和英文逗号，汉字不可以

<el-input
   v-model="checkForm.projectCode"
   placeholder="请输入项目编号"
   style="width:260px"
   @input="checkForm.projectCode = checkForm.projectCode.replace(/[^\w\,]/g,'')"
></el-input>

持续更新中…