vue3的登录注册页面
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脚手架后写的登录注册页面,页面添加一些校验,例如:密码是否一致,年龄自动计算等,有问题的话主页加我联系方式,或者私信我~本人是菜鸟,有问题欢迎指出~
更多推荐
所有评论(0)