vue开发常用需求

一、输入框禁止输入表情

<el-input v-else  placeholder="请输入游戏URL地址"  v-model="dataForm.url"  @change="vaidateEmoji('url')"></el-input>
js
dataForm:{
    url:'',
}
// 方法
vaidateEmoji(name) {
      let regStr = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi;
      this.dataForm[name] = this.dataForm[name].replace(regStr, '')
 },

二、获取输入框字节长度

val.charCodeAt(i) 判断是否是中文
getByteLen(val) {
      var len = 0;
      for(var i = 0; i < val.length; i++){
        if(val.charCodeAt(i) > 255){
          // val.charCodeAt(i) 判断是否是中文
          len += 2;
        }else{
          len += 1;
        }
      }
      return len;
},

三、正则校验
1.至少输入一个数字和字母

let regex = new RegExp((?=.*[0-9])(?=.*[a-zA-Z]));

四、element下拉选择框搜索内容与渲染内容字段不一致功能

<el-select
    size="small"
    filterable
    v-model="modifyInfo.defaultProvince"
    :filter-method="handleFilterMethod"
>
    <el-option v-for="item in cityList" 
        :key="item.value"
        :value="item.value"
        :label="item.value"
    >
        <span>{{item.label}}</span>
    </el-option>
</el-select>

 // 禁止输入e等其他非法字符
    btKeyUp(e) {
      //限制输入特殊字符
      e.target.value = e.target.value.replace(/[`~!@#$%^&*().\-_+=<>?:"{}|,\/;'\\[\]·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '');
      // 不能输入汉字、英文 
      e.target.value = e.target.value.replace(/[\a-\z\A-\Z\u4E00-\u9FA5]/g, '');
    },