vue中a-input添加正则方法封装

一、utils下创建文件reg.js

const regList={
  //数字 
  phone:(value)=>{
          if(value){
            return value.target.value.replace(/[^\d]/g, '')
          }
        },
   //汉字  
  hanzi:(value)=>{
    if(value){
      return value.target.value.replace(/[^\u4E00-\u9FA5]/g, '')
    }
  },
  //数字+字符 
  chinEng:(value)=>{
    if(value){
      return value.target.value.replace(/[^\w_]/g,'')
    }
  }
}

export function inputReg(value,key,regName){
//判断regList对象是否存在属性 避免报错
  regList.hasOwnProperty.call(regList,regName)&&(this.queryForm[key]=regList[regName](value))
}

提示：根据自己需求写对应的正则

二、需要使用的vue页面引入reg.js的inputReg方法并绑定this到方法上

<a-form-item >
    <span slot="label" :style='labelStyle'>申请人姓名</span>
    <a-input v-model="queryForm.customerName"   placeholder="请输入申请人姓名"     
     @input="inputReg($event,'customerName','hanzi')"  style="width: 200px" allowClear/>
    </a-form-item>



import { inputReg } from '@/utils/reg'



methods:{
    inputReg,
},

created() {
  inputReg.bind(this)()
},

提示：1.在created通过。bind改变inputReg方法的this（将当前页面对象传给函数）

           2.inputReg的三个参数分别为

                （1）$event dom对应的事件对象

                （2）v-model绑定的对应字段

                （3）要使用的正则函数名

   

 end