登录(实时验证手机格式、验证码)

思路:
动态验证手机号格式:利用计算属性会根据内容的变化而调用的特点,将表单绑定v-model，在计算属性中,利用正则不断检验手机格式,正确返回true验证码:当手机号格式正确时,点击才有效,利用时间制造三元运算符改变验证码的文本内容,且倒计时期间,再次点击无效

代码示例:

<template><div class='login'><p @click='$router.back()'><</p><div class='md'><p>Jeff外卖</p><div class='linfo'>//验证手机号<div v-show='flag'><div class='mp'><span>手机号</span><input type="text" placeholder="" v-model="phone"><span :class='{rphone:right_phone}' @click='getNum'>{{time?'剩下'+time+'秒':'获取验证码'}}</span>//利用time是否为0动态显示内容//利用计算属性,添加符合时的验证码样式</div><div class='mp2'><span>验证码</span><input type="text"></div></div></div></div>
</template><script>import Vue from 'vue';import { Switch } from 'vant';Vue.use(Switch);export default{data(){return{flag:true,checked:false,type:'password',phone:'',time:0, //倒计时timeFlag:true  //是否能够再次发送验证码}},methods:{getNum(){if(this.right_phone) //调用计算属性,点击时是否能够触发验证码{ if(this.timeFlag)  //倒计时期间的旗帜{this.timeFlag=false;this.time=60;let timer=setInterval(()=>{this.time--;if(this.time==0){this.timeFlag=true;clearInterval(timer);}},1000)}}else{alert('请输入正确手机号');}}},computed:{ //计算属性动态验证手机号,其中手机号v-model双向绑定right_phone(){return /^1\d{10}$/.test(this.phone) //正则匹配是否11个数字,返回布尔值}}}
</script><style lang='less'>.mlog{margin-top: 20px;text-align: start;.mp{width: 100%;height: 40px;line-height: 40px;white-space: nowrap;margin-bottom: 20px;>span:last-child{color:#ccc;margin-left: -40px;}border: solid 1px #ccc;>input{border: none;}.rphone{  //手机号格式正确时的验证码样式color:black !important;}}}
</style>