总结前端常用的正则表达式

一、常见的个人信息限制的正则表达式

（1）姓名只能包含汉子或者英文：/^([\u4E00-\u9FA5]+|[a-zA-Z]+)$/
（2）大陆身份证号：/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
（3）手机号：/^1[345678]\d{9}$/

二、输入框限制输入

（1）只允许输入正整数

 <el-input placeholder="请输入"  v-model="str" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>

（2）只允许输入数字，可以小数点后面保留两位

<el-input onkeyup="this.value=this.value.replace(/[^\d.-]/g, '').replace(/\-{2,}/g, '-').replace(/\.{2,}/g, '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')" v-model="param.commRatio">

（3）密码8位以上密码包含数字、字母、特殊字符

 rules: [{
      message: '8位以上包含数字、字母和特殊字符',
      pattern: /[\w\W]{8,}/,
      trigger: 'blur'
    }]

（4）只允许输入数字和英文逗号

 <el-input onkeyup="this.value=this.value.replace(/[^\d\,]/g,'')" :disabled="param.state==0" v-model="param.roleDisable" type="textarea" wrap="hard" placeholder="示列多角色：1，2，3，4，5"></el-input>

注意：不知道为什么用onkeyup当中文和英文来回切换时v-model可能拿不到值或者拿到错误的中文，后来改为下面的格式没有此问题

 <el-input placeholder="请输入"  v-model="str" @input="str=str.replace(/^(0+)|[^\d]+/g,'')"></el-input>

三、特殊的需求

（1）app版本升级设置时版本号要求1.0.0格式的版本号

   /^[0-9]\.[0-9]\.[0-9]$/

（2）项目有个地址管理需求要求用户选择的省市县自动代入到详细地址栏里面，用户在填写详细地址时不能删除省市县且后面输入的不能只有数字

省市县我用的插件city-select

<city @sendCity="getCity" :Address='orderAddress' style="float:left"></city>

（1）在省市县选择的事件赋值给详细地址字段

    getCity(val){
            this.addressparam.receiveAddress = this.appendstr+ this.addressparam.regionName;//详细地址
            this.startText = this.appendstr+ this.addressparam.regionName;//用来后面对比不能删除省市县
        },

（2）限制不能删除省市县

<el-input style="width:400px"  @keyup.native="inputaddress" v-model="addressparam.receiveAddress" placeholder="请输入详细地址" size="medium" ></el-input>

  inputaddress(){//给详细地址输入框绑定判断长度
    if(this.addressparam.receiveAddress.indexOf(this.startText)==0||this.addressparam.receiveAddress ==     this.startText){
               return false;
            }else{
                this.addressparam.receiveAddress =this.startText
            }
        },

（3）手动输入的不能只有数字

detectNum(str){
    let n=0;
     for(var i=0;i<str.length;i++){                 
         n = str.charCodeAt(i)
         if(n<48||n>57){return false;}
         return true
     }
 },
 let inputstr = this.addressparam.receiveAddress.substr(this.startText.length, this.addressparam.receiveAddress.length);
 if(this.detectNum(inputstr)){//截取省市县之后的所以用户手动输入的内容判断是否只有汉字
       this.$message.error("请输入正确的详细地址")
       return false;
   }

至此这个变态的需求完成了