使用vue2+element UI组件库写一套登录和注册流程
时间: 2023-07-30 19:09:34 浏览: 60
好的,下面是一个简单的示例代码:
```html
<template>
<div class="login-container">
<el-tabs v-model="activeTab">
<el-tab-pane label="登录" name="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="100px" class="login-form">
<el-form-item label="用户名" prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="loginForm.password" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="注册" name="register">
<el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-width="100px" class="register-form">
<el-form-item label="用户名" prop="username">
<el-input v-model="registerForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="registerForm.password" type="password"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="registerForm.confirmPassword" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="register">注册</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 'login',
loginForm: {
username: '',
password: ''
},
loginRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
},
registerForm: {
username: '',
password: '',
confirmPassword: ''
},
registerRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度在6到20个字符之间', trigger: 'blur' }
],
confirmPassword: [
{ required: true, message: '请确认密码', trigger: 'blur' },
{ validator: this.checkPassword, trigger: 'blur' }
]
}
}
},
methods: {
login() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
// 登录逻辑
console.log(this.loginForm);
}
});
},
register() {
this.$refs.registerForm.validate((valid) => {
if (valid) {
// 注册逻辑
console.log(this.registerForm);
}
});
},
checkPassword(rule, value, callback) {
if (value !== this.registerForm.password) {
callback(new Error('两次输入的密码不一致'));
} else {
callback();
}
}
}
}
</script>
```
以上代码使用了 Element UI 组件库中的 `el-tabs`、`el-form`、`el-input` 和 `el-button` 组件,实现了登录和注册的表单验证和提交逻辑。其中,通过 `v-model` 绑定了表单数据,通过 `:rules` 绑定了表单验证规则,通过 `@click` 绑定了提交按钮的点击事件,通过 `$refs` 引用表单组件并调用 `validate` 方法进行表单验证。
需要注意的是,以上代码仅供参考,具体实现方式可以根据实际需求进行调整和修改。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)