前端使用正则校验手机号属于哪个运营商

根据传入的电话号码判断其所属的运营商类型（中国移动、中国联通、中国电信），并在页面上显示相应的运营商信息。如果电话号码不匹配任何运营商的格式，则显示提示信息让用户自行选择运营商。

模板代码如下，主要是利用el-input失焦

<el-col :span="24">
            <el-form-item label="手机号码" prop="phone">
              <el-input
                v-model="form.phone"
                @input="handlephone"
                placeholder="请输入手机号码"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="运营商" prop="parentid">
              <el-input
                v-model="phoneType"
                placeholder="输入手机号后自动匹配"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="openType">
            <el-form-item label="选择运营商" prop="mobile_type">
              <el-select
                v-model="form.mobile_type"
                placeholder="全部"
                clearable
                style="width: 240px"
              >
                <el-option
                  v-for="item in Operator"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

js代码如下：

handlephone() {
      this.openType = false;
      this.phoneType = "";
      this.mobile_type = "";
      if (this.form.phone.length === 11) {
        this.retPhoneToJs(this.form.phone);
      }
    },
    retPhoneToJs(data) {
      const isChinaMobile =
        /^134[0-8]\d{7}$|^(?:13[5-9]|147|15[0-27-9]|178|18[2-478])\d{8}$/; // 移动
      const isChinaUnion = /^(?:13[0-2]|145|15[56]|176|18[56])\d{8}$/; // 联通
      const isChinaTelcom = /^(?:133|153|177|18[019])\d{8}$/; // 电信

      if (isChinaMobile.test(data)) {
        this.phoneType = "中国移动";
        this.mobile_type = "1";
      } else if (isChinaUnion.test(data)) {
        this.phoneType = "中国联通";
        this.mobile_type = "2";
      } else if (isChinaTelcom.test(data)) {
        this.phoneType = "中国电信";
        this.mobile_type = "3";
      } else {
        this.phoneType = "未知!请自行选择运营商";
        this.openType = true;
      }
    },

• 首先，将 this.openType 设置为 false，将 this.phoneType 和 this.mobile_type 置空。
• 接着，检查 this.form.phone 的长度是否为11位。
• 如果电话号码长度为11位，则调用 retPhoneToJs(this.form.phone) 方法。
• 然后传入校验方法：
• 定义了三个正则表达式，分别用于匹配中国移动、中国联通和中国电信的手机号码格式。
• 根据传入的电话号码 data，依次使用正则表达式进行匹配。