vue3的登录注册页面

1.技术：

vue3

2.编译软件：

vscode

3.登录注册页面代码：

3.1登录

<template>

  <div class="home">

    <Login msg="亲爱的用户，欢迎回来！"/>

  </div> 

  <div class="hello">

    <div class="All">

        <div class="LoginFramework">

            <form  @submit.prevent="handleSubmit" action="">

                <h2>登录账户</h2>

                <div>

                  <!-- 账号长度0-6位 ，不允许有文字，字母以及特殊符号-->

                    <span>账号</span>

                    <input  v-model="loginForm.Username" pattern="[a-zA-Z0-9]+"  @blur="inputVal = $event.target.value" @input="checkInputLength" οninput="if(value.length > 12) value=value.slice(0, 12)" id="Username" type="text" class="text" placeholder="请输入账号">

                    <!-- <span v-if="inputValue.length > 6" style="color: red;font-size: 12px;margin-left: 10px;margin-top: 10px;" >输入长度小于六位</span> -->

                </div>

                <div>

                    <!-- 密码只允许数字，不允许文字-->

                    <span>密码</span>

                    <input v-model="loginForm.Password" id="Password" οnkeyup="value=value.replace(/[^\d]/g,'')"  @blur="inputVal = $event.target.value" show-password type="password" class="text" placeholder="请输入密码">

                </div>

                <div>

                    <span>角色</span>

                    <select class="Role" id="Role" v-model="loginForm.Role">

                        <option value="option" disabled selected hidden>请选择</option> <!-- 默认显示的提示信息 -->

                        <option value="manager">管理员</option>

                        <option value="plant">种植户</option>

                        <option value="transport">物流商</option>

                        <option value="sale">销售方</option>

                        <option value="process">加工厂</option>

                    </select>

                </div>

                <div>

          <button @click="handleSubmit" id="login" type="button" class="submit" value="登录">登录</button>

        </div>

        <div>

          <a href="./register" ><input  class="submit" type="button"  value="注册"></a>

        </div>

            </form>

        </div>

    </div>

    </div>

</template>

<script>

import { ref } from 'vue';

export default {

  name: 'HelloWorld',

  props: {

    msg: String

  }，

return{

      handleSubmit,

    }

}

</script>

<style scoped>

.hello{

  position: fixed; /* 定位为固定位置 */

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  background-image: url(../assets/壁纸.jpg);

  background-size: cover;

}

ul{

  list-style-type: none;

  padding: 0;

}

a{

  color: #120414;

}

.Role{

  margin-top: 10px;

  width: 165px;

  height: 25px;

  padding-left: 10px;

  border-radius: 5px;

  border: none;

}

.All{

    padding: 150px;

    display: flex;

    align-items: center;

    flex-direction: column;

    margin-top: 10px;

}

.LoginFramework{

    width: 350px;

    height: 300px;

    padding-top: 50px;

    padding-bottom: 50px;

    border-radius: 10px;

    background: linear-gradient(45deg, #f7f7f7, #a7a7a5);

}

form{

    height: 100%;

    display: flex;

    align-items: center;

    flex-direction: column;

    justify-content: space-between;

}

h2{

    font-size: 40px;

}

span{

    display: inline-block;

    width: 90px;

    text-align: left;

}

.submit{

  margin-top: 20px;

  width: 290px;

  height: 30px;

  background: linear-gradient(-45deg, white);

  font-size: 22px;

  font-family: Cursive;

  border-radius: 40%;

  border: none;

  width: 160px;

  backdrop-filter: blur(116px);

}

.text{

  margin-top: 10px;

  width: 165px;

  height: 25px;

  padding-left: 10px;

  border-radius: 5px;

  border: none;

}

</style>

3.2注册页面代码：

<template>

  <div class="hello">

    <div class="All">

        <div class="RegistFramwork">

            <form action="">

                <h1>注册账户</h1>

                <div>

                    <span>账号</span>

                    <input v-model="username" pattern="[a-zA-Z0-9]+" @blur="inputVal = $event.target.value" @input="checkInputLength" οninput="if(value.length > 12) value=value.slice(0, 12)"  id="Username" type="text" class="text" placeholder="请输入账号">

                </div>

                <div>

                    <span>出生日期</span>

                    <input  class="text" type="date" id="birthDate" v-model="birthDate">

                </div>

                <div>

                    <div>

                    <span id="ageClass">年龄: </span>

                    <input disabled="true" class="text" id="age" :value="age">

                    </div>

                </div>

                <div>

                    <span class="sex">性别</span>

                    <input type="radio"  value="男" name="sex" v-model="gender">男

                    <input type="radio"  value="女"  name="sex" v-model="gender">女

                </div>

                <div>

                    <span>联系方式</span>

                    <input v-model="inputValue"  οnkeyup="value=value.replace(/[^\d]/g,'')" id="phone" type="text" class="text" placeholder="请输入联系方式">

                    <p v-if="inputValue.length > 11 " style="color:rgb(255, 69, 69);position: relative;margin-left:68px;">非正常号码</p>

                </div>

                <div>

                    <span>密码</span>

                    <input v-model="input1" οnkeyup="value=value.replace(/[^\d]/g,'')"  @blur="inputVal = $event.target.value" show-Password  id="Password" type="password" class="text" placeholder="请输入密码">

                </div>

                <div>

                    <span>确认密码</span>

                    <input v-model="input2" id="rePassword" type="password" class="text" placeholder="请再次确认密码">

                </div>    

                    <span  v-if="input2!=input1" style="color:rgb(255, 69, 69);position: relative;margin-left:68px;">两次密码不一致</span>

                <div>

                    <span>角色</span>

                    <select class="text" id="Role" v-model="role">

                        <option value="option" disabled selected hidden>请选择</option> <!-- 默认显示的提示信息 -->

                        <option value="manager">管理员</option>

                        <option value="plant">种植户</option>

                        <option value="transport">物流商</option>

                        <option value="sale">销售方</option>

                        <option value="process">加工厂</option>

                    </select>

                </div>

                <div>

                    <input @click="regist" type="button" class="submit" value="注册">

        </div>

        <div>

          <a href="./" ><input type="button" class="submit" value="返回登录"></a>

                </div>

            </form>

        </div>

    </div>

</div>

</template>

<script>

import{ref,computed} from 'vue'

export default {

  name: 'HelloWorld',

  props: {

    msg: String

  },

  setup() {

    // 密码是否一致判断

    const input1 = ref('');

    const input2 = ref('');

    const isMatch = computed(() => {

      return input1.value === input2.value;

    });

    // 判断电话号码是否正常（超过11位不正常）

    const inputValue = ref('');

    const isValid = computed(() => /^\d{11}$/.test(inputValue.value));

    // 年龄（自动计算）

    const birthDate = ref('');

    const age = computed(() => {

      if (birthDate.value) {

        const birthday = new Date(birthDate.value);

        const today = new Date();

        let age = today.getFullYear() - birthday.getFullYear();

        const m = today.getMonth() - birthday.getMonth();

        if (m < 0 || (m === 0 && today.getDate() < birthday.getDate())) {

          age--;

        }

        return age;

      }

      return 0;

    });

 return {input1, input2, isMatch,regist,  inputValue,isValid,birthDate,age};

</script>

<style scoped>

.hello{

    position: fixed; /* 定位为固定位置 */

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background-image: url(../assets/壁纸.jpg);

    background-size: cover;

}

.All{

    padding: 30px;

    display: flex;

    align-items: center;

    flex-direction: column;

}

.RegistFramwork{

    margin-top: 60px;

    width: 360px;

    height: 500px;

    padding-top: 50px;

    padding-bottom: 50px;

    border-radius: 10px;

    background: linear-gradient( #f7f7f7, #a7a7a5);

}

form{

    height: 100%;

    display: flex;

    align-items: center;

    flex-direction: column;

    justify-content: space-between;

}

h2{

    font-size: 20px;

}

span{

    display: inline-block;

    width: 120px;

    text-align: left;

}

.sex{

    width: 225px;

}

.hobby{

    width: 125px;

}

.submit{

    width: 290px;

    height: 30px;

    background: linear-gradient(-45deg,  white);

    font-size: 22px;

    font-family: Cursive;

    border-radius: 40%;

    border: none;

    width: 160px;

    backdrop-filter: blur(116px);

}

.worktype{

  margin-top: 10px;

  width: 165px;

  height: 25px;

  padding-left: 10px;

  border-radius: 5px;

  border: none;

}

.text{

    width: 165px;

    height: 25px;

    padding-left: 10px;

    border-radius: 5px;

    border: none;

}

</style>

4.图片展示：

5.作者有话说：

搭建vue-cil脚手架后写的登录注册页面，页面添加一些校验，例如：密码是否一致，年龄自动计算等，有问题的话主页加我联系方式，或者私信我~本人是菜鸟，有问题欢迎指出~