Vue判断手机号正则

原创

姚辉乾51CTO 2022-01-16 10:43:46 博主文章分类：vue ©著作权

©著作权归作者所有：来自51CTO博客作者姚辉乾51CTO的原创作品，请联系作者获取转载授权，否则将追究法律责任

<template>
<div class="addAddress">
<template v-if="loading">
<div class="loading">
<van-loading color="black"/>
</div>
</template>
<template v-else>
<div class="changeContent">
<div class="inputContent">
<span class="contentName">手机号</span>
<input type="number" class="inputN" v-model="newPhone" οninput="if(value.length>11)value=value.slice(0,11)"
placeholder="请输入您在首佳物业预留的手机号"/>
</div>
</div>
<div class="btn" @click="goAddressDtail()">验证</div>
</template>
<van-popup v-model="show" position="right">
<div class="quanxian">您暂无权限访问该页面</div>
</van-popup>
</div>
</template>
<script>
export default {
name: "add-address",
data() {
return {
loading: false,
newPhone: "",
state: null,
show: false
}
},
methods: {
goAddressDtail() {
const self = this;
if (!(/^1[34578]\d{9}$/.test(self.newPhone))) {
   console.log("电话号码格式错误");
self.$toast({
message: "电话号码格式错误",
position: "bottom"

})
} else if (self.newPhone == "" || !self.newPhone) {
   console.log("请输入电话号码");
self.$toast({
message: "请输入电话号码",
position: "bottom"

})
} else {
self.$ajax({
url: '/index.php/ApiHome/Myself/bindingphone',
data: {
wxopenid: localStorage.getItem('openId'),
phone: self.newPhone,
},
}).then(_ => {
   console.log("then");
const data = _.data;
localStorage.setItem('phone', data.content.phone);
localStorage.setItem('uid', data.content.uid);

if (+data.content.phone === 1) {
console.log(self.state, 'homeIndex', '====', 'homeIndex' === self.state);
if (self.state === 'homeIndex') {
console.log(222, self.state);
location.replace('http:///homeIndex?tab=0') // 在线报修
} else if (self.state === 'homeIndex@2') {
location.replace('http:///homeIndex?tab=1') // 微信缴费
} else if (self.state === 'messageBoard') {
location.replace('http:///messageBoard') // 沟通交流
} else if (self.state === 'homeIndex@3') {
location.replace('http:///homeIndex?tab=2') // 通知公告
} else if (self.state === 'phoneMe') {
location.replace('http:///phoneMe') // 联系我们
} else if (self.state === 'projectAdmin') {
location.replace('http:///projectAdmin') // 项目管理
}
} else if (+data.content.phone === 2) {
if (self.state === 'homeIndex') {
location.replace('http:///homeIndex?tab=0') // 在线报修
} else if (self.state === 'homeIndex@2') {
location.replace('http:///homeIndex?tab=1') // 微信缴费
} else if (self.state === 'messageBoard') {
location.replace('http:///messageBoard') // 沟通交流
} else if (self.state === 'homeIndex@3') {
location.replace('http:///homeIndex?tab=2') // 通知公告
} else if (self.state === 'phoneMe') {
location.replace('http:///phoneMe') // 联系我们
} else if (self.state === 'projectAdmin') {
self.show = true; // 项目管理业主、访客无权限
}
} else if (+data.content.phone === 3) {
if (self.state === 'homeIndex') {
location.replace('http:///homeIndex?tab=0') // 在线报修
} else if (self.state === 'homeIndex@2') {
location.replace('http:///homeIndex?tab=1') // 微信缴费
} else if (self.state === 'messageBoard') {
location.replace('http:///messageBoard') // 沟通交流
} else if (self.state === 'homeIndex@3') {
location.replace('http:///homeIndex?tab=2') // 通知公告
} else if (self.state === 'phoneMe') {
location.replace('http:///phoneMe') // 联系我们
} else if (self.state === 'projectAdmin') {
self.show = true; // 项目管理业主、访客无权限
}
}
})
}
},
},
//初始化
mounted() {
/*this.$router.replace({
name: 'projectAdmin'
})*/
const self = this;
const r = self.$route;
localStorage.setItem('openId', r.query.openid);
localStorage.setItem('headimgurl', r.query.headimgurl);
localStorage.setItem('phone', r.query.phone);
localStorage.setItem('uid', r.query.uid);
console.log('r.query.state', r.query.state);
self.state = r.query.state;
if (r.query.phone === '0') { // 没有绑定手机号
self.loading = false;
} else if (+r.query.phone === 1) { // 是员工
if (self.state === 'homeIndex') {
location.replace('http:///homeIndex') // 在线报修
} else if (self.state === 'homeIndex@2') {
location.replace('http:///homeIndex?tab=1') // 微信缴费
} else if (self.state === 'messageBoard') {
location.replace('http:///messageBoard') // 沟通交流
} else if (self.state === 'homeIndex@3') {
location.replace('http:///homeIndex?tab=2') // 通知公告
} else if (self.state === 'phoneMe') {
location.replace('http:///phoneMe') // 联系我们
} else if (self.state === 'projectAdmin') {
location.replace('http:///projectAdmin') // 项目管理
}
} else if (+r.query.phone === 2) { // 业主
if (self.state === 'homeIndex') {
location.replace('http:///homeIndex') // 在线报修
} else if (self.state === 'homeIndex@2') {
location.replace('http:///homeIndex?tab=1') // 微信缴费
} else if (self.state === 'messageBoard') {
location.replace('http:///messageBoard') // 沟通交流
} else if (self.state === 'homeIndex@3') {
location.replace('http:///homeIndex?tab=2') // 通知公告
} else if (self.state === 'phoneMe') {
location.replace('http:///phoneMe') // 联系我们
} else if (self.state === 'projectAdmin') {
self.show = true; // 项目管理业主、访客无权限
}
} else if (+r.query.phone === 3) { // 访客
if (self.state === 'homeIndex') {
location.replace('http:///homeIndex') // 在线报修
} else if (self.state === 'homeIndex@2') {
location.replace('http:///homeIndex?tab=1') // 微信缴费
} else if (self.state === 'messageBoard') {
location.replace('http:///messageBoard') // 沟通交流
} else if (self.state === 'homeIndex@3') {
location.replace('http:///homeIndex?tab=2') // 通知公告
} else if (self.state === 'phoneMe') {
location.replace('http:///phoneMe') // 联系我们
} else if (self.state === 'projectAdmin') {
self.show = true; // 项目管理业主、访客无权限
}
}
}
}
</script>

}
.inputN {
outline: none;
border: none;
height: 1.75rem;
font-size: 1.25rem;
color: rgba(51, 51, 51, 1);
line-height: 1.75rem;
flex: 1 1 auto;
}
.inputN::placeholder {
height: 1.75rem;
font-size: 1.25rem;
color: rgba(184, 184, 184, 1);
line-height: 1.75rem;
}
}
}
.btn {
width: 95%;
height: 4.08rem;
background: rgba(45, 127, 239, 1);
border-radius: 0.33rem;
margin: 3rem auto;
font-size: 1.5rem;
color: rgba(255, 255, 255, 1);
line-height: 4.08rem;
text-align: center;
}

.loading {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.quanxian {
text-align: center;
padding-top: 50px;
font-size: 26px;
color: #999;
}
}

</style>