根据传入的电话号码判断其所属的运营商类型(中国移动、中国联通、中国电信),并在页面上显示相应的运营商信息。如果电话号码不匹配任何运营商的格式,则显示提示信息让用户自行选择运营商。
模板代码如下,主要是利用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
,依次使用正则表达式进行匹配。