vue 之手机号验证 正则验证手机号是否正确 手机号验证码信息弹窗

vue 之手机号验证、正则验证手机号是否正确

项目介绍：

首先 项目是为了获取用户手机号码，其次 验证手机号后才可评论也是为了不让用户乱评论；

2.

填写评论后，弹出提交手机号、验证码弹窗；填写手机号后获取验证码，输入验证码正确后，才可提交评论；

// 1.判断评论内容不为空，出验证手机号弹窗；posttijiao () {if (this.plcontent == "") {Message({message: "评论不能为空",type: "warning",duration: 5 * 1000});} else if (this.lpdptel == "") {this.islpdp = true;//this.tiptan(4);}},//1.验证手机号 正则判断为正确的手机号才发送验证请求；codetap () {if (!/^1[34578]\d{9}$/.test(this.lpdptel)) {Message({message: "请填写正确的手机号",type: "warning",duration: 5 * 1000});} else {const params = {mobile: this.lpdptel};sendCode(params).then(res => {console.log(res);if (res.msg == "发送成功!") {Message({message: "发送成功!",type: "warning",duration: 5 * 1000});}});}},//3.最后提交评论 判断手机号正确 验证码不为空 提交评论；getloupanpinglun () {if (this.ison) {if (!/^1[34578]\d{9}$/.test(this.lpdptel)) {Message({message: "请填写正确的手机号",type: "warning",duration: 5 * 1000});} else if (this.code == "") {Message({message: "请填写验证码",type: "warning",duration: 5 * 1000});} else {const params = {type: 2,a_id: this.lid,content: this.plcontent,mobile: this.lpdptel,code: this.code};addComment(params).then(res => {console.log(res);if (res.msg == "输入验证码不正确!") {Message({message: res.msg,type: "warning",duration: 5 * 1000});} else {Message({message: res.msg,type: "warning",duration: 5 * 1000});this.getloupanInfo();this.plcontent = "";this.lpdptel = "";this.code = "";this.islpdp = false;}});// console.log(mentlist);}} else {Message({message: "请阅读并同意 喜欢房用户服务协议",type: "warning",duration: 2 * 1000});}},

html:

<div class="infoboxtan"v-if="islpdp"><div class="infoboxtanbd"><i class="close"@click="closeinfo"></i><div class="tanmain"><h2 class="titlebox">楼盘点评<span>我们将为您保密个人信息</span></h2><form class="formbox"><input placeholder="您的电话"name="mobile"class="txt"type="number"maxlength="11"v-model="lpdptel" /><div class="codebox"><input placeholder="验证码"name="code"class="txt"type="number"v-model="code" /><p class="codetap"@click="codetap()">获取验证码</p></div><p class="agree clearfix"><i :class="[{ duiico: true }, ison ? 'on' : '']"@click="isoncli"></i><span @click="isoncli">阅读并同意</span><router-link :to="{ name: 'fwxy' }">喜欢房用户服务协议</router-link></p><input type="button"class="yuyuetab"value="立即评论"@click="getloupanpinglun" /></form></div></div></div>

其他js:

data () {return {ison: false,islpdp: false,lpdptel: "",code: ""}},methods: {isoncli () {this.ison = !this.ison;},closeinfo () {this.islpdp = false;this.ison = false;this.lpdptel = "";this.code = "";}}

样式：(less)

@blue: #ff222c;.codebox {width: 100%;display: flex;justify-content: space-between;.code {width: 3rem;}.codetap {height: 0.86rem;width: 3rem;border-radius: 0.1rem;background: @red;font-size: 0.3rem;color: #fff;line-height: 0.86rem;text-align: center;margin-left: 0.4rem;}}.infoboxtan {position: fixed;top: 0;left: 0;width: 100%;height: 100%;// margin: -2rem 0 0 -3.4rem;background: rgba(0,0,0,0.8);z-index: 999;.infoboxtanbd{position: fixed;top: 50%;left: 50%;width: 6.8rem;height: 4.9rem;margin: -2rem 0 0 -3.4rem;background: #fff;// z-index: 999;border-radius: 0.1rem;// box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.1);.close {display: block;position: absolute;width: 0.3rem;height: 0.3rem;top: 0.2rem;right: 0.2rem;background: url(../assets/img/close-xx.png) no-repeat center;background-size: 100% 100%;cursor: pointer;}.tanmain {width: 6.2rem;margin: 0.2rem auto 0;.titlebox {font-weight: normal;line-height: 0.8rem;color: #333;font-size: 0.38rem;.line{display: block;float: left;width: 0;height: .28rem;border-left: 2px solid @blue;margin: .28rem .1rem 0 0;}span {font-size: 0.24rem;color: #999;margin-left: 0.1rem;}}.formbox {input {display: block;width: 100%;height: 0.86rem;border: 1px solid #bfbfbf;box-sizing: border-box;margin-bottom: 0.2rem;text-indent: 0.2rem;font-size: 0.3rem;color: #000;line-height: 0.6rem;border-radius: 0.1rem;background: none;outline: none;}.agree {width: 100%;margin-bottom: 0.16rem;color: #999;.duiico {display: block;float: left;width: 0.28rem;height: 0.28rem;border: 1px solid #aaa;margin-right: 0.1rem;margin-top: 1px;box-sizing: border-box;}.on {border: 0 none;background: url(../assets/img/duiico.png) no-repeat center;}a {color: #ff222c;margin-left: 0.1rem;}}.yuyuetab {height: .8rem;line-height: .8rem;background: @red;font-size: 0.3rem;color: #fff;text-indent: 0;border: 0 none;}}}}}