Vue注册界面精美模板分享

🐒个人主页：信计2102罗铠威

🏅Vue项目常用组件模板仓库

📖前言：

本篇博客主要提供vue组件之注册组件源码，需要的朋友请自取

这里是网址图像联网会显示，圆角头像（可以自己更换）
这里是登陆背景网址图像，联网会显示，可以自行更换

🎀源码如下：

<template>
	<div id="divbox">
		<!-- 【此图像是圆圈头像logo】 -->
		<img src="https://ts1.cn.mm.bing.net/th/id/R-C.3aeeb6d5725738095a7ad521d46ce428?rik=prLV4puYz%2btYuw&riu=http%3a%2f%2fwww.gx8899.com%2fuploads%2fallimg%2f2018021008%2fjrmgrhcgro0.jpg&ehk=Im%2fy1GA0xuqdwYNnKtzfue2b09jzjym4jjUXy7e0Seo%3d&risl=&pid=ImgRaw&r=0"
			alt="Your Image">
		<div class="login-form">
			<div id="logo">
				<span style="font-family: 'Microsoft YaHei';letter-spacing: 0.5px; font-weight: bold; font-size: 40px;">
					&nbsp; 欢迎注册🐒平台系统
				</span>
			</div>
			<el-form ref="form" :rules="rules" :model="form" label-width="80px">
				<el-form-item label="用户名" prop="account">
					<el-input v-model="form.account" class="input"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="form.password" class="input" show-password></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="password1">
					<el-input type="password" v-model="form.password1" class="input" show-password></el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="RegAccount('form')" style="width: 300px;">注册</el-button>
					<br />
					<span style="color: #006A5A;" @click="login()">已有账号？点击返回</span>
				</el-form-item>
			</el-form>
		</div>


	</div>
</template>

<script>
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.form.password1 !== '') {
						this.$refs.form.validateField('password1');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.form.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				form: {
					account: '',
					password: '',
					password1: '',
					mark: "reg"
				},
				rules: {
					account: [{
							required: true,
							message: '请输入注册的管理员账户！',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入账户密码！',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}, {
							validator: validatePass,
							trigger: 'blur'
						}
					],
					password1: [{
							required: true,
							message: '请再次确认账户密码！',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}, {
							validator: validatePass2,
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			login() {
				// alert("登录页面");
				// this.$router.push('/');
			},
			RegAccount(reffrom) { //【注册】
				//数据向后端发送进行验证
				//$refs是一个引用

				this.$refs[reffrom].validate((valid) => {
					if (valid) {
						//如果发送成功，跳转到其他组件
						//【跳转语句】
						this.$message({
							showClose: true,
							message: '恭喜你，账户已注册✔',
							type: 'success'
						});

		
						/* 
						this.$message({showClose: true,message: '系统忙，维修人员正在抢修！',type: 'warning'}); */
					}
				});
			}
		}
	}

	//将json对象序列化为键=值&键=值
	function jsonToString(jsonObj) {
		//console.log(jsonObj);
		var str = "";
		for (var s in jsonObj) {
			str += s + "=" + jsonObj[s] + "&";
		}
		return str.substring(0, str.length - 1);
	}
</script>

<style>
	#divbox {
		width: 100%;
		height: 100vh;
		/*将🎀页面背景  图片路径替换为你自己的图片路径*/
		background-image: url("https://ts1.cn.mm.bing.net/th/id/R-C.b923d0630782b4e46dcbb2121b22bdbf?rik=l7wVr9wcUyyTzw&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f68%2f768.jpg&ehk=anhoZ%2fxmeecIhRHc2n9reoQbtJ2xXrvIEx0sJbLLMiI%3d&risl=&pid=ImgRaw&r=0");
		/*保持图片比例并完全覆盖元素*/
		background-size: cover;
		background-position: center center;
		/*将图片居中对齐*/
	}

	.login-form {
		width: 442px;
		height: 400px;
		background-color: rgba(248, 242, 235, 0.5);
		;
		position: relative;
		left: 455px;
		top: 170px;


	}

	#logo {
		width: 100%;
		height: 60px;
		/* background-color: aquamarine; */
		margin-bottom: 30px;
	}

	.input {
		max-width: 300px;
	}

	img {
		border-radius: 50%;
		width: 100px;
		position: absolute;
		left: 638px;
		top: 50px;
	}
</style>