vue实现登录注册模板

最新推荐文章于 2024-05-27 18:50:16 发布
最新推荐文章于 2024-05-27 18:50:16 发布
阅读量2.7w 收藏 196
点赞数 26
分类专栏： Vue2 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40323256/article/details/103020807
版权

模板1： 

login.vue

<template>
	<p class="login">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="登录" name="first">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="名称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>

					<el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input></el-form-item>

					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>

						<el-button @click="resetForm('ruleForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>

			<el-tab-pane label="注册" name="second">
				<register></register>
			</el-tab-pane>
		</el-tabs>
	</p>
</template>

<script>
import register from '@/components/register';

export default {
	data() {
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.ruleForm.checkPass !== '') {
					this.$refs.ruleForm.validateField('checkPass');
				}

				callback();
			}
		};

		return {
			activeName: 'first',
			ruleForm: {
				name: '',
				pass: '',
				checkPass: ''
			},
			rules: {
				name: [{ required: true, message: '请输入您的名称', trigger: 'blur' }, { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }],
				pass: [{ required: true, validator: validatePass, trigger: 'blur' }]
			}
		};
	},

	methods: {
		//选项卡切换
		handleClick(tab, event) {},
		//重置表单
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		//提交表单
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$message({
						type: 'success',
						message: '登录成功'
					});
					this.$router.push('home');
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		}
	},
	components: {
		register
	}
};
</script>

<style lang="scss">
.login {
	width: 400px;
	margin: 0 auto;
}

.el-tabsitem {
	text-align: center;
	width: 60px;
}
</style>

register.vue

//register组件

<template>
	<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		<el-form-item label="用户名" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
		<el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input></el-form-item>
		<el-form-item label="确认密码" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input></el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
			<el-button @click="resetForm('ruleForm')">重置</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
export default {
	data() {
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.ruleForm.checkPass !== '') {
					this.$refs.ruleForm.validateField('checkPass');
				}
				callback();
			}
		};

		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.ruleForm.pass) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};

		return {
			activeName: 'second',
			ruleForm: {
				name: '',
				pass: '',
				checkPass: ''
			},
			rules: {
				name: [{ required: true, message: '请输入您的名称', trigger: 'blur' }, { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }],
				pass: [{ required: true, validator: validatePass, trigger: 'blur' }],
				checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
			}
		};
	},

	methods: {
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$message({
						type: 'success',
						message: '注册成功'
					});
					// this.activeName: 'first',
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},

		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
};
</script>

效果图

模板2：

 

login.vue

<template>
    <el-row type="flex" justify="center">
      <el-form ref="formData" :model="formData" :rules="rules" label-width="80px" @keyup.enter.native="login()">
        <el-form-item prop="userName" label="用户名"><el-input v-model="formData.userName" placeholder="请输入用户名" prefix-icon="icon-login_user" clearable></el-input></el-form-item>
        <el-form-item prop="password" label="密码"><el-input v-model="formData.password" placeholder="请输入密码" type="password" prefix-icon="icon-login_pwd" clearable></el-input></el-form-item>
        </el-form-item>
        <el-form-item><el-button type="primary" class="btn" @click="login('formData')" icon="el-icon-upload">登录</el-button>
         <el-button @click="resetForm('formData')">重置</el-button></el-form-item></el-form-item>
         <router-link to="register">没有密码？注册</router-link>
      </el-form>
    </el-row>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        userName: '',
        password: ''
      },
      rules: {
        userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
      }
    };
  },
  methods: {
    login(formName) {

        this.$refs[formName].validate(valid => {
				if (valid) {
					this.$message({
						type: 'success',
						message: '登录成功'
                    });
                     this.$router.push({name:'home'});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
    },
     resetForm(formName) {
			this.$refs[formName].resetFields();
		}
  }
};
</script>

register.vue

<template>
    <el-row type="flex" justify="center">
      <el-form ref="formData" :model="formData" :rules="rules" label-width="80px" @keyup.enter.native="register()">
        <el-form-item prop="userName" label="用户名"><el-input v-model="formData.userName" placeholder="请输入用户名" prefix-icon="icon-login_user" clearable></el-input></el-form-item>
        <el-form-item prop="password" label="密码"><el-input v-model="formData.password" placeholder="请输入密码" type="password" prefix-icon="icon-login_pwd" clearable></el-input></el-form-item>
        <el-form-item prop="cheackPassword" label="确认密码"><el-input v-model="formData.cheackPassword" placeholder="再次输入密码" type="password" prefix-icon="icon-login_pwd" clearable></el-input></el-form-item>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="register('formData')" icon="el-icon-upload">注册</el-button>
            <el-button @click="resetForm('formData')">重置</el-button></el-form-item>
         <router-link to="login">已有密码？登录</router-link>

      </el-form>
    </el-row>
</template>
<script>
export default {
  data() {
      var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.formData.password) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};

    return {
      formData: {
        userName: '',
        password: '',
        cheackPassword:''
      },
      rules: {
        userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        cheackPassword: [{ required: true, validator: validatePass, trigger: 'blur' }]

      }
    };
  },
  methods: {
    register(formName) {
      this.$refs[formName].validate(valid => {
				if (valid) {
					this.$message({
						type: 'success',
						message: '注册成功'
                    });
                     this.$router.push({name:'login'});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
    },
    resetForm(formName) {
			this.$refs[formName].resetFields();
		}

  }
};
</script>

效果图

疆~
关注
  • 26
    点赞
  • 踩
  • 196
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
vue登录注册表单切换后台模板
07-07
vue登录注册表单切换，实现登录注册的一些切换，采用的vue.min.js ,可以用来做简单的学习用
Vue注册界面精美模板分享
罗铠威的博客
05-30 2330
本篇博客主要提供vue组件之注册组件源码，需要的朋友请自取这里是网址图像联网会显示，圆角头像（可以自己更换）这里是登陆背景网址图像，联网会显示，可以自行更换。
vue 简约 大气登录页“附源码”
最新发布
潮黯的博客
05-27 614
vue 简约 大气登录页“附源码”
一个 vue 登陆页面
ximingx
12-08 9005
vue 登陆页面 组件
VUE登录注册页面,完整vue，直接复制
good_good_study5的博客
02-01 1万+
VUE登录注册页面，直接复制全部
Vue登录界面精美模板分享
罗铠威的博客
05-30 6782
本篇博客主要提供vue组件之登陆组件源码，需要的朋友请自取这里是网址图像联网会显示，圆角头像（可以自己更换）这里是登陆背景网址图像，联网会显示，可以自行更换。
【Vue作业]---Vue登录注册界面
coding加油站
07-01 1万+
vue作业，vue登陆，vue登录，简单作业，简单vue作业
vue+vuex+axios实现登录、注册页权限拦截
08-27
Vue+Vuex+Axios实现登录、注册页权限拦截 在本篇文章中，我们将探讨使用Vue、Vuex和Axios来实现登录和注册页的权限拦截。这个项目基于模板，具有很好的参考价值。 一、修改配置文件 首先，我们需要修改config...
vue实现后端管理模板
06-01
9. **登录与权限验证**: 集成了用户登录、注册以及权限验证的功能，通过JWT（JSON Web Token）等技术实现用户身份认证。 10. **文档与示例**: Vue-element-admin提供了详细的文档和示例代码，帮助开发者快速理解和...
vue 实现通过手机发送短信验证码注册功能
08-27
Vue 实现通过手机发送短信验证码注册功能 ...本文介绍了如何使用 Vue 和 Vuex 实现通过手机发送短信验证码注册功能，涵盖了组件、模板、表单验证、Vuex 状态管理、短信验证码发送、倒计时功能和验证码输入框等知识点。
vue网站后台登录注册和忘记密码切换页
07-13
文件名`Zp_demo.demohuo.top_73`可能是这个项目的压缩包文件，解压后可能包含项目的源代码、样式文件、图片资源等，便于开发者查看和学习Vue.js实现登录注册和忘记密码功能的具体代码和结构。 总的来说，这个项目...
VUE+element-ui开发出的美观好看的登录/注册模板组件 集成方便
07-01
VUE+element-ui开发出的美观好看的登录/注册模板组件 集成方便,本人耗时好几周才完成的, 头发掉了不少, 4.9买不了吃亏买不了上当.请我加个鸡腿吧. 效果图博客地址: https://yinyue.blog.csdn.net/article/details/118379258
vue实现登录界面
热门推荐
Hi-Sun的博客
06-16 5万+
使用Vue实现简单的用户登录界面，登录成功以后查询账号用户类型进行相应的页面路由跳转，效果如下图所示： HTML部分： <div class="loginbody"> <div class="login"> <div class="mylogin" align="center"> <h4>登录</h4> <el-form :model="loginForm"
Vue3常规登录页面模板
sybkl的博客
07-23 8145
vue3（JavaScript）登录页面模板，包含element-plus，scss，axios
【登录界面】vue、element-ui登录界面模板
baiqi123456的博客
10-15 1万+
这里总结一个用vue、element-ui写的登录界面，为以后复制粘贴备用。/*布局容器样式 main header fotter*///点击登录按钮后发送ajax请求给后端进行账号密码比对。/*放账号密码input的div*//* 输入框样式*/
Vue登录界面
Sinlair的博客
04-23 1364
Login.vue。
手把手教你使用Vue搭建注册登录界面及前端源码
asdfadafd的博客
03-07 8223
文章目录 一、前言 二、概况 三、搭建注册页面 四、改造登录页面 四、整体效果动画演示 五、前端源码下载 六、后续 一、前言 本文将在vue-admin-template模板基础上完成搭建注册与登录页面。文末处有完整的前端源码下载。 环境准备 浏览器：Chrome IDE: VS Code Node.js 10+，npm 二、概况 我们先了解一下整个项目的目录结构 ├── build # 构建相关 ├── mock
Vue案例详解(七):制作登录页面
柳老师的博客
07-08 4901
本篇文章写于2023年7月8日,使用的包和工具基本上都是最新的(Vue3, VS code),如果你查看的时间比较晚,请注意版本的区别.前面几篇文章介绍了Vue的使用,项目的搭建和一些基本信息.Vue3案例详解(一)_flame.liu的博客-CSDN博客Vue3案例详解(二)_flame.liu的博客-CSDN博客Vue3案例详解(三)_flame.liu的博客-CSDN博客Vue3案例详解(四)_flame.liu的博客-CSDN博客Vue3案例详解(五)_flame.liu的博客-CSDN博客。
笔记之vue实现登录与注册功能
qq_45217161的博客
04-12 3509
else {next()})state: {user: null},},actions: {},},})<template></div><script></script>现在运行 `npm run serve` 启动项目，即可访问 http://localhost:8080 进行登录注册操作。
vue实现登录注册界面
06-01
首先，你需要创建一个 Vue 项目。然后可以这样实现登录注册界面： 1. 创建两个组件：Login 和 Register。 2. 在 Login 组件中，你需要设置 `data` 属性来存储用户名和密码： ```javascript data() { return { username: '', password: '' } }, ``` 3. 创建一个 `login` 方法来处理登录逻辑： ```javascript methods: { login() { // 处理登录逻辑 } }, ``` 4. 在模板中，你可以使用 `v-model` 指令来绑定输入框的值，并在表单中使用 `@submit` 事件来触发 `login` 方法： ```html <template> <form @submit.prevent="login"> <input type="text" v-model="username" placeholder="用户名"> <input type="password" v-model="password" placeholder="密码"> <button type="submit">登录</button> </form> </template> ``` 5. 在 Register 组件中，你需要设置 `data` 属性来存储用户名、密码和确认密码： ```javascript data() { return { username: '', password: '', confirmPassword: '' } }, ``` 6. 创建一个 `register` 方法来处理注册逻辑： ```javascript methods: { register() { // 处理注册逻辑 } }, ``` 7. 在模板中，你可以使用 `v-model` 指令来绑定输入框的值，并在表单中使用 `@submit` 事件来触发 `register` 方法： ```html <template> <form @submit.prevent="register"> <input type="text" v-model="username" placeholder="用户名"> <input type="password" v-model="password" placeholder="密码"> <input type="password" v-model="confirmPassword" placeholder="确认密码"> <button type="submit">注册</button> </form> </template> ``` 以上仅为简单示例，具体实现会依据你的业务逻辑而有所不同。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值