如何将input中的手机号按 3 4 4 分割?

如何将input中的手机号按 3 4 4 分割?

• 主要用到的知识点

  • 正则表达式

    • /(\d{3})(\d{0,4})(\d{0,4})/
      • \d 匹配一个数字, 等价于 [0-9]
      • {n,m} n 和 m 都是整数。匹配前面的字符至少n次，最多m次。如果 n 或者 m 的值是0， 这个值被忽略。
      • {n} n 是一个正整数，匹配了前面一个字符刚好出现了 n 次.

  • trim()

    • 该方法会从一个字符串的两端删除空白字符

  • replace(regexp

    substr, newSubStr

    function)

    • 该方法会按照regexp的正则规则匹配原字符串, 并用newSubStr替换掉第一个参数在原字符串中的匹配部分的字符串

    • 例如:

      let str = '17816134129'
      str.replace(/(\d{3})(\d{0,4})(\d{0,4})/, "$1 $2 $3")
      // str = '178 1613 4129'
      

  • vue深度监听

    watch: {
        data: {
            handler(val) {
                    
            },
            deep: true
        }
    }
    

  • 本地存储手机号

    localStorage.setItem()
    

• 代码

  <script>
  data() {
      return {
        oldPhone: "",
          model: {
          phone: "", //注意: 这里的phone会带有空格, 在使用时记得清除空格或直接从localStorge中读取phone
          password: "",
        },
      }
  },
  watch: {
      // 监听手机号和密码输入
      model: {
        handler(val) {
          // console.log(`新${val.phone}, 旧${this.oldPhone}`)
          this.model.phone =
            val.phone.length > this.oldPhone.length
              ? val.phone
                  .replace(/\s/g, "")
                  .replace(/(\d{3})(\d{0,4})(\d{0,4})/, "$1 $2 $3")
              : this.model.phone.trim();
          // trim() 方法会从一个字符串的两端删除空白字符
          if (val.phone.replace(/\s/g, "").length === 11 && val.password !== "") {
            // 验证/保存的手机号码，去除空格 --本地存储
            localStorage.setItem(
              "phone",
              JSON.stringify(this.model.phone.replace(/\s/g, ""))
            );
            this.isComplate = true; //手机号和密码都已输入内容
          } else {
            this.isComplate = false;
          }
          // 记录本次输入的phone, 在下次时进行比较
          this.oldPhone = val.phone;
        },
        deep: true,
      },
    },    
  </script>