输入框实现344格式号码粘贴也可

时间路人e

已于 2023-10-26 15:36:55 修改

阅读量332

点赞数

文章标签： javascript 前端开发语言

于 2022-12-09 15:42:40 首次发布

本文链接：https://blog.csdn.net/weixin_50748620/article/details/128254153

版权

输入框实现344格式号码粘贴，输入

 <el-input
          ref="smsLoginPhone"
          v-model="smsLoginForm.phone"
          name="phone"
          maxlength="13"
          size="medium"
          type="text"
          tabindex="1"
          class="phoneInput"
          placeholder="手机号码"
          @input="inputHandle"
          @paste.native="pasteHandle"
        >
          <i slot="prefix" class="el-input__icon el-icon-mobile" />
        </el-input>

限制特殊字符输入

method：{
 inputHandle() {
      const mobile = this.smsLoginForm.phone.replace(/[a-zA-Z\u4E00-\u9FA5`@~!#$%^&*()_\+=<>?:"{}|,/;'\\[\]·~！#￥%……&*（）\+={}|《》？：.“”【】、；‘’，。、]/g, '')
      this.smsLoginForm.phone = mobile
    },
    //粘贴事件处理
      pasteHandle(e) {
      console.log(e, '粘贴事件')
      const val = e.target.value
      let value = this.getValue(e, val).substr(0, 11) // 获取输入/粘贴内容,并截取前11位
      const len = value.length
      if (len > 3 && len < 8) {
        value = value.replace(/^(\d{3})/g, '$1 ')
      } else if (len >= 8) {
        value = value.replace(/^(\d{3})(\d{4})/g, '$1 $2 ')
      }
      this.smsLoginForm.phone = value
    },
}

效果 100 8600 0000

注意校验的时候记得去掉空格，