【Vue作业]---Vue登录注册界面

vue作业，vue登陆，vue登录，简单作业，简单vue作业

coding加油站

10499人浏览 · 2022-07-01 10:00:00

coding加油站 · 2022-07-01 10:00:00 发布

1、引言

你是否有过相关设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

Vue登录注册界面采用vue技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

2.1、作品简介方面

Vue登录注册界面采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用），java，python等相关作业使用自己常使用的工具亦可完成相关二次开发。

2.3、作品技术介绍

vue作品技术方面：使用vue技术开发的网站，涉及常见的vue指令，如v-for，v-if，v-html等的使用，包含watch，计算属性等常见功能的开发，以及组件的使用，使用vue相关全家桶的使用，运用了v-router来作为路由，完全符合常见的网站开发技术。同时也会使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。

3、功能介绍：

(1) 实现登录以及注册的功能界面

(2) 实现登录以及注册功能的切换

(3) 对手机号进行校验

(4) 内容清晰，布局合理

(5) 上部分使用nav导航进行导航

4. 内容介绍：

主要效果图如下：

核心代码：


<script>


    export default {
        name: "Login",
        data() {
            return {
                phoneNum:'',
                phonePass:'',
                institution:'',
                username:'',
                userPass:'',
                currentForm: 'PhoneLogin',
                phoneActive: true,
                phoneNumMsg:'',
                phoneNumMsgShow:false,
                phonePassMsg:'',
                phonePassMsgShow:false,
                institutionMsg:'',
                institutionMsgShow:false,
                usernameMsg:'',
                usernameMsgShow:false,
                userPassMsg:'',
                userPassMsgShow:false,
                phoneNumNormal:true,
                phonePassNormal:true,
                institutionNormal:true,
                usernameNormal:true,
                userPassNormal:true,
                phoneFormValid:false,
                userFormValid:false

            }
        },
        methods: {
            changeForm(formName) {
                this.currentForm = formName;
                this.phoneActive = !this.phoneActive
            },
            phoneNumCheck(){
                 let valid = true;
                if(this.phoneNum.length===0){
                    this.phoneNumMsgShow =true;
                    this.phoneNumMsg='请输入手机号';
                    valid=false;
                    this.phoneFormValid=false
                }

                if(this.phoneNum.length !== 11 && valid){
                    this.phoneNumMsgShow =true;
                    this.phoneNumMsg='请输入正确的手机号';
                    this.phoneFormValid=false;
                }

               if(this.phoneNum.length === 11){
                   this.phoneNumMsgShow =false;
                  this.phoneFormCheck()
               }
                this.phoneNumNormal =true

            },
            phoneNumActive(){
                this.phoneNumNormal=false
            },
            phonePassCheck(){
                if(this.phonePass === ''){
                    this.phonePassMsgShow=true;
                    this.phonePassMsg='请输入密码';
                    this.phoneFormValid =false
                }
                if(this.phonePass.length !== 0){
                    this.phonePassMsgShow =false;
                     this.phoneFormCheck()
                }
                this.phonePassNormal =true
            },
            phonePassActive(){
                this.phonePassNormal=false
            },
            institutionCheck(){
                if(this.institution === ''){
                    this.institutionMsgShow =true;
                    this.institutionMsg='请输入机构名';
                    this.userFormValid =false
                }

                if(this.institution.length !== 0){
                    this.institutionMsgShow =false;
                    this.userFormCheck()
                }
                this.institutionNormal =true
            },
            institutionActive(){
                this.institutionNormal=false
            },
            usernameCheck(){
                if(this.username === ''){
                    this.usernameMsgShow =true;
                    this.usernameMsg='请输入用户名';
                    this.userFormValid =false;
                }

                if(this.username.length !== 0){
                    this.usernameMsgShow =false;
                    this.userFormCheck()
                }
                this.usernameNormal =true
            },
            usernameActive(){
                this.usernameNormal=false
            },
            userPassCheck(){
                if(this.userPass === ''){
                    this.userPassMsgShow=true;
                    this.userPassMsg='请输入密码';
                    this.userFormValid =false;
                }
                if(this.userPass.length !== 0){
                    this.userPassMsgShow =false;
                    this.userFormCheck()
                }
                this.userPassNormal =true
            },
            userPassActive(){
                this.userPassNormal=false
            },
            doLogin(){
                let valid = true;
                if(this.phoneActive){//通过手机号登陆


                     if(this.phoneNum === ''){
                         this.phoneNumMsgShow =true;
                         this.phoneNumMsg='请输入手机号';
                         valid=false
                     }

                    if(this.phoneNum.length !== 11 && valid){
                        this.phoneNumMsgShow =true;
                        this.phoneNumMsg='请输入正确的手机号';
                        valid=false
                    }

                    if(this.phonePass === ''){
                        this.phonePassMsgShow=true;
                        this.phonePassMsg='请输入密码';
                        valid=false
                    }

                    if(valid){
                        console.log(this.phoneNum +"---" +this.phonePass)
                    }

                }else {//机构登陆
                    if(this.institution === ''){
                        this.institutionMsgShow =true;
                        this.institutionMsg='请输入机构名';
                        valid=false
                    }

                    if(this.username === ''){
                        this.usernameMsgShow =true;
                        this.usernameMsg='请输入用户名';
                        valid=false
                    }

                    if(this.userPass === ''){
                        this.userPassMsgShow=true;
                        this.userPassMsg='请输入密码';
                        valid=false
                    }
                }
            },
            phoneFormCheck(){
                if(this.phoneNum.length===11 && this.phonePass!==''){
                    this.phoneFormValid=true
                }
            },
            userFormCheck(){
                if(this.institution !=='' && this.username !=='' && this.userPass!==''){
                    this.userFormValid=true
                }
            }
        }
    }


</script>

<template>
    <div class="container">

        <div class="header">
            <div class="nav">

                <div class="logo"></div>

                <div class="right">
                    <span><b>申请使用</b></span>
                    <span><b>官网</b></span>
                    <span><b>周边</b></span>
                    <span><b>帮助</b></span>
                    <span><b>公众号</b></span>
                </div>
            </div>
        </div>

        <div class="main">
            <div class="content">
                <div class="main-top">
                    <div class="banner">
                        <img style="width: 560px; margin:0 ;padding: 0"
                             src=" https://schoolpal.oss-cn-hangzhou.aliyuncs.com/erpbanner/erplogin0827.jpg" alt=""/>
                    </div>

                    <div class="login-form">

                        <div style="display: flex; justify-content: space-between;margin-top: 60px; height:50px">

                            <div style="display: flex; align-items: center ; flex-direction: column;">
                                <span  :class="phoneActive?'msg_title active':'msg_title notActive'"  @click="changeForm('PhoneLogin')">手机号码登录</span>
                                <div  class="sub_form_title" v-show="phoneActive"></div>
                            </div>

                            <div style="display: flex; align-items: center ; flex-direction: column;">
                                <span :class="phoneActive?'msg_title notActive':'msg_title active'" @click="changeForm('UserLogin')">账号登录</span>
                                <div class="sub_form_title" v-show="!phoneActive"></div>
                            </div>
                        </div>

                        <div class="form" v-if="phoneActive" style="margin-bottom: 60px" >
                            <div class="form-group" >
                                <input  v-model="phoneNum" :class="phoneNumMsgShow?'errorInput':phoneNumNormal?'normalInput':'activeInput'" type="text"
                                        placeholder="请输入手机号码" v-on:keyup="phoneNumCheck()"  v-on:focus="phoneNumActive">
                                <span  v-show="phoneNumMsgShow"  class="errorMsg">{{phoneNumMsg}}</span>
                            </div>

                            <div class="form-group" style="margin-top: 30px">
                                <input v-model="phonePass" type="password" :class="phonePassMsgShow?'errorInput':phonePassNormal?'normalInput':'activeInput'" placeholder="请输入密码"  v-on:keyup="phonePassCheck()"  v-on:focus="phonePassActive()">
                                <span  v-show="phonePassMsgShow" class="errorMsg">{{phonePassMsg}}</span>
                            </div>
                        </div>


                        <div class="form" v-if="!phoneActive">

                            <div class="form-group">
                                <input  v-model="institution" :class="institutionMsgShow?'errorInput':institutionNormal?'normalInput':'activeInput'" type="text" placeholder="请输入机构后缀"  v-on:keyup="institutionCheck()"  v-on:focus="institutionActive()">
                                <span  v-show="institutionMsgShow" class="errorMsg">{{institutionMsg}}</span>
                            </div>


                            <div class="form-group">
                                <input  v-model="username" type="text"  :class="usernameMsgShow?'errorInput':usernameNormal?'normalInput':'activeInput'" placeholder="请输入登录名" v-on:keyup="usernameCheck()"  v-on:focus="usernameActive()">
                                <span  v-show="usernameMsgShow" class="errorMsg">{{usernameMsg}}</span>
                            </div>

                            <div class="form-group">
                                <input v-model="userPass" type="password" :class="userPassMsgShow?'errorInput':userPassNormal?'normalInput':'activeInput'" placeholder="请输入密码"  v-on:keyup="userPassCheck()"  v-on:focus="userPassActive()">
                                <span  v-show="userPassMsgShow" class="errorMsg">{{userPassMsg}}</span>
                            </div>
                        </div>



                        <button class="btn" :class="phoneActive?phoneFormValid?'btnEnabled':'btnDisabled':userFormValid?'btnEnabled':'btnDisabled'"  :disabled="phoneActive?phoneFormValid:userFormValid"  @click="doLogin()">登录</button>
                    </div>
                </div>

                <div class="main-footer">
                    <div class="left-item">
                        <span><b>相关产品</b></span>
                        <div style="margin-top: 5px">
                            <div class="item">
                                <div>
                                    <img src="https://prox.schoolpal.cn/common/images/icon-scp.png" alt=""/>
                                </div>
                                <div class="tip">
                                    <span class="title"><b>校宝收银宝</b></span>
                                    <span class="sub_title">学校收费标配</span>
                                </div>
                            </div>

                            <div class="item">
                                <div>
                                    <img src="https://prox.schoolpal.cn/common/images/icon-zhaoshengbao.png" alt=""/>
                                </div>
                                <div class="tip">
                                    <span class="title"><b>校宝招生宝</b></span>
                                    <span class="sub_title">一站招生服务</span>
                                </div>
                            </div>

                            <div class="item">
                                <div>
                                    <img src="https://prox.schoolpal.cn/common/images/icon-anxinbao.png" alt=""/>
                                </div>
                                <div class="tip">
                                    <span class="title"><b>校宝安心宝</b></span>
                                    <span class="sub_title">教育保险精选</span>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="right-item">
                        <div>
                            <span><b>咨询热线</b></span>
                        </div>

                        <div style="margin-right: 10px; margin-bottom: 20px">
                            <span style="font-size: 28px"><b>400-6999-707</b></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

获取完整代码，请关注（coding加油站）获取。