给我使用html+css+js+vue写一个前端登录和注册页面的模板。要求加上用户名密码不为空的判断,美化一下界面
时间: 2024-05-09 22:16:49 浏览: 20
好的,我给您提供一个使用Vue.js的前端登录注册页面的模板。如下所示:
```html
<template>
<div class="login-wrapper">
<form class="login-form">
<h2>Login</h2>
<div class="form-group">
<input type="text" v-model.trim="userName" placeholder="Username" />
<span v-show="isNameEmpty">*Username should not be empty</span>
</div>
<div class="form-group">
<input type="password" v-model.trim="password" placeholder="Password" />
<span v-show="isPasswordEmpty">*Password should not be empty</span>
</div>
<button type="button" @click="onLogin">Login</button>
</form>
<form class="register-form">
<h2>Register</h2>
<div class="form-group">
<input type="text" v-model.trim="userName" placeholder="Username" />
<span v-show="isNameEmpty">*Username should not be empty</span>
</div>
<div class="form-group">
<input type="password" v-model.trim="password" placeholder="Password" />
<span v-show="isPasswordEmpty">*Password should not be empty</span>
</div>
<div class="form-group">
<input type="password" v-model.trim="confirmPassword" placeholder="Confirm Password" />
<span v-show="isConfirmPasswordEmpty">*Confirm password should not be empty</span>
<span v-show="password !== confirmPassword">*Passwords are not same</span>
</div>
<button type="button" @click="onRegister">Register</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
userName: '',
password: '',
confirmPassword: '',
};
},
computed: {
isNameEmpty() {
return this.userName.trim() === '';
},
isPasswordEmpty() {
return this.password.trim() === '';
},
isConfirmPasswordEmpty() {
return this.confirmPassword.trim() === '';
},
},
methods: {
onLogin() {
if (!this.isNameEmpty && !this.isPasswordEmpty) {
// TODO: Implement login logic
}
},
onRegister() {
if (!this.isNameEmpty && !this.isPasswordEmpty && !this.isConfirmPasswordEmpty && this.password === this.confirmPassword) {
// TODO: Implement register logic
}
},
},
};
</script>
<style scoped>
.login-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.login-form,
.register-form {
display: flex;
flex-direction: column;
align-items: center;
padding: 32px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: white;
}
.login-form {
margin-right: 32px;
}
h2 {
margin-bottom: 32px;
font-size: 28px;
font-weight: bold;
}
.form-group {
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 16px;
}
input {
height: 48px;
padding: 0 16px;
border-radius: 5px;
border: solid 1px #ccc;
font-size: 16px;
outline: none;
}
button {
width: 100%;
height: 48px;
margin-top: 32px;
border: none;
border-radius: 5px;
background-color: #0072ff;
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
button:hover {
opacity: 0.8;
}
</style>
```
这个登录注册页面模板使用了Vue.js框架,并且包括了用户名密码非空的判断逻辑,还美化了界面。您可以基于此修改样式、逻辑,实现您想要的登录注册页面。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)