el-input 限定输入框的数据类型

el-input官方没有给出限制输入的数据类型

一、限制输入为数字

//这是最简单的处理方法，但是输入框会自带两个加减的按钮(如果不想要就用下面的方法)
<el-input
     v-model.trim="dataForm.couponTotal"
     autocomplete="off"
     type="number"
     >
 </el-input>

//这个是通过正则校验，把不是数字的替换成空
<el-input
   v-model.trim="dataForm.couponTotal"
   oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
    >
 </el-input>
 //这种写法会出现一个bug，如果el-input的上级元素是el-form-item，
 //会导致el-form-item的必填校验出问题（中文输入法下不能输入，但校验失效了）
 //没有找到合适的解决方法，于是自己写了原生的校验方法：如下

	<el-form-item
      label="领券上限"
      prop="couponTotal"
      :rules="{
       required: true,
       message: '领券上限必填',
      }"
    >
        <el-input
          v-model.trim="dataForm.couponTotal" @input="checkInputNum"">
        </el-input>
     </el-form-item>
  //限制领券上限必须是数字
    checkInputNum(e) {
      var numReg = /^[0-9]*$/;        
      //如果不是数字，清空输入框
      if (!numReg.test(e)) {
        this.dataForm.couponTotal = "";
      }
    },

二、限制输入为字母

<el-input
   v-model.trim="dataForm.couponTotal"
   oninput="value=value.replace(/[^a-zA-Z]/g,'')"
    > 
 </el-input>