简易登录功能的实现(VUE2)

---

需求分析

首先就是铺页面，这个没有什么可说的之后就是逻辑上的了，首先手机号，手机号要是11位的要进行正则判断如果手机号不对要给与提示，之后就是获取验证码，点击获取验证码，获取验证码的盒子要消失之后出现的是倒计时的盒子，倒计时结束之后要清除定时器，之后将时间还原，之后要将获取验证码的盒子给显示，之后就是验证码了，验证码发送的是4位验证码，如果验证码输入的不符合规则就会在失焦的时候出现弹窗，提示我们请检查验证码，之后就是密码，密码也要进行正则判断如果密码不对在失焦的时候也要给与提示，之后就是确认密码，确认密码如果与密码不一样就会弹出一个弹窗，给予提示，最后就是登录按钮了，登录如果想要成功的话，就要这四个条件都要满足，如果4个条件都满足的话就弹出一个登录成功，如果登录失败的话就会弹出一个请检查是否有错误

---

代码实现

<template>
    <div class="all">
         <div class="box">
       <div class="phonenum">手机号</div>
    <div class="shouji">    
        <input  type="text" placeholder="请输入手机号"  @change="getphone"  @blur="phoneblur"> <span v-show="isphone">请输入正确的手机号</span>
    </div>   
    <div class="yz">验证码</div>
    <div class="yanzhengma">    
        <input  type="text" placeholder="验证码" @blur="codeblur" @change="getmsg"> <div class="btn" v-show="isshow"  @click="getcode">获取验证码</div> <div v-show="!isshow" class="btn">{{ this.num }}s</div>
    </div>  


    <div class="yz">新密码</div>
    <div class="mima">    
        <input  type="password" placeholder="6位有大小写字母数字字符" @change="getpwd"  @blur="pwdblur">
    </div>  
    
    
    <div class="yz">重复新密码</div>
    <div class="mima">    
        <input  type="password" placeholder="请输入重复新密码"  @blur="rpwdblur"  @change="getrpwd"> 
    </div>  

    <button class="login" @click="login">登录</button>
         </div>
    </div>
</template>

<script>  
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
    export default {
           data(){
             return {
                  phone:'',
                  code:'',
                  pwd:'',
                  rpwd:'',
                  num:10,
                  isshow:true,
                  isphone:false
             }
           },
           methods:{
            login(){
                let  r1= /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*?]).*$/; //密码
                let r2 = /^\d{4}$/;   //验证码
                let r3 = /^(?:(?:\+|00)86)?1\d{10}$/ //手机号

                     if(r1.test(this.pwd)&&r2.test(this.code)&&r3.test(this.phone)&&this.pwd==this.rpwd){
                           Toast('登录成功');    
                     }else {
                        Toast('请检查是否有错误');    
                          
                     }

            },
            rpwdblur(){
                  if(this.pwd==this.rpwd){

                  } else {
                Toast('请输入相同的密码');
                       
                  }
            },
            pwdblur(){
                // 密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符 。
                let  r= /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
                // console.log(r.test(this.pwd));
                if(!r.test(this.pwd)){
                Toast('请输入正确的密码,至少1个大写字母，1个小写字母，1个数字，1个特殊字符');
   
                }

            },
            codeblur(){
                let r = /^\d{4}$/;
            //    console.log(r.test(this.code));
               if( !r.test(this.code)) {
                Toast('请输入正确格式的验证码');
               }
            },
            getmsg(v){
                this.code=v.target.value
            },
            getpwd(v){
                this.pwd=v.target.value
            },
            getrpwd(v){
                this.rpwd=v.target.value
            },
            getphone(v){
                  this.phone=v.target.value
            },
            phoneblur(){
                let r = /^(?:(?:\+|00)86)?1\d{10}$/
                    // console.log(r.test(this.phone));   
                    if(r.test(this.phone)){
                          this.isphone=false
                    }else {
                        this.isphone=true                          
                    }
            },
             getcode(){
                  let r = /^(?:(?:\+|00)86)?1\d{10}$/
                    console.log(r.test(this.phone));   
               if(r.test(this.phone)){
                    this.isshow=false
                    this.isphone=false
                    let t = setInterval(()=>{
                           this.num--
                         if(this.num<1) {
                            clearInterval(t)
                            this.isshow=true
                            this.num=10
                         }                   
                    },100)
               } else {
                Toast('请输入正确格式的手机号');
                        
                this.isphone=true                          

               }    
            

               }
           }        
    }
</script>

<style  scoped>
.login {
     width: 360px;
     height: 40px;
     background-color: darkred;
     color: #fff;
     text-align: center;
     line-height: 40px;
     margin-top: 30px;
}
.yz {
     margin-top: 10px;
}
input{
border:0px;
outline:none;
}
.box {
    padding: 20px;
    position: absolute;
   width: 400px;
   height: 600px;
   /* background-color: red; */
   left: 0;
   top: 0;
   bottom: 0;
   right: 0;
   margin: auto;
.shouji  {
       margin-top: 10px;
       width: 360px;
       height: 30px;
       border-bottom: 1px solid gray; 
       display: flex;
       justify-content: space-between;
       align-items: center;
}
.yanzhengma {
    margin-top: 10px;
       width: 360px;
       height: 30px;
       border-bottom: 1px solid gray;
       display: flex;
       justify-content: space-between;
       align-items: center; 
   .btn {
        width: 100px;
        height: 20px;
        background-color: darkred;
        color: #fff;
        margin-right: 10px;
        text-align: center;
   }    
}
.mima {
    margin-top: 10px;
       width: 360px;
       height: 30px;
       border-bottom: 1px solid gray;
}



}

</style>