vue开发常用的input正则

各位前端小伙伴们肯定会遇到只能输入数字等这种限制用户的需求，因为目前项目用的是vue+element，如果要限制输入问题，很多人肯定会选择el-input自带的type=“number”，但是不得不说这个真的鸡肋一样🙄，根本过不了测试小姐姐那一关。于是乎就有了下面的操作😉。

tips: oninput虽然没有输出闪烁但是使用输入法输入中文会把原来输入框的删除掉，故可以使用onkeyup虽然有输出闪烁但是不会删除输入框内的，自己取舍吧。

1.input限制只输入数字，我这里使用的是element中的el-input也是适用的（注意使用这个一定要把type="number"去掉）

// οninput="value=value.replace(/[^\d.]/g,'')"加个点就是可以输入小数点咯
 <el-input
   oninput="value=value.replace(/[^\d]/g,'')"
   placeholder="请输入手机号"
   maxlength="11"
 ></el-input>

2.el-input限制用户仅仅能输入数字且最多2位小数（这个是真的恶心，网上很多方法都有闪烁现象，我结合2种实现的）

 <el-input
  oninput="value=value.replace(/[^\d.]/g,'')"
  :maxlength="inputMaxL"
  @input="inputMaxL = /^\d+\.?\d{0,1}$/.test(value) ? null : value.length - 1"
  placeholder="请输入销售金额"
  @mousewheel.native.prevent
></el-input>

// data里面
data() {
  return {
    inputMaxL: null,
  }

3.el-input限制用户只能输入数字和大小写英文，常用在身份证和税号上

<el-input
placeholder="请输入法人身份证号码"
oninput="value=value.replace(/[\W]/g,'')"
maxlength="18"
></el-input>

待更新…