sgyc/公司注册和个人注册/companies.vue

<template>
	<div class="companies">
		<form action="">
		<div><span>*</span><span>用户名：</span><input type="text" placeholder="请输入用户名作为账号" v-model="username">
		<p v-if="username.length > 3 && username.length < 10"><img src="../../../assets/reg_tips_proper.png" alt="">输入正确</p>
		<p v-else><img src="../../../assets/reg_tips_err.png" alt="">输入错误！用户名不能为空或长度过短过长</p>
		</div>
		<div><span>*</span><span>密码：</span><input type="password" placeholder="请输入6-20位(字母,数字符号)" v-model="passage1">
		<p v-if="passage1.length >= 6 && passage1.length <=20"><img src="../../../assets/reg_tips_proper.png" alt="">输入正确</p>
		<p v-else><img src="../../../assets/reg_tips_err.png" alt="">输入错误！密码不能为空或长度过短过长</p>
		<div class="passagepower">
		<span>密码强度：</span>
		<div class="poweritem1" v-if="passage1.length >= 6 && passage1.length <= 20"></div>
		<div class="poweritem2" v-if="passage1.length >= 10 && passage1.length <= 20"></div>
		<div class="poweritem3" v-if="passage1.length >= 15 && passage1.length <= 20"></div>
		</div>
		</div>
		<div><span>*</span><span>确认密码：</span><input type="password" placeholder="请输入您的密码" v-model="passage2">
		<p v-if="passage2 == passage1 && passage2.length >= 6 && passage2.length <= 20"><img src="../../../assets/reg_tips_proper.png" alt="">输入正确</p>
		<p v-else><img src="../../../assets/reg_tips_err.png" alt="">输入错误！密码不一致</p>
		</div>
		<div><span>*</span><span>公司名称：</span><input type="text" placeholder="请输入公司名称" v-model="companyname">
		<p v-if="companyname"><img src="../../../assets/reg_tips_proper.png" alt="">输入正确</p>
		<p v-else><img src="../../../assets/reg_tips_err.png" alt="">输入错误！公司不能为空或长度过短过长</p>
		</div>
		<div><span>*</span><span>联系人：</span><input type="text" placeholder="请输入联系人称呼" v-model="person">
		<p v-if="person"><img src="../../../assets/reg_tips_proper.png" alt="">输入正确</p>
		<p v-else><img src="../../../assets/reg_tips_err.png" alt="">输入错误！称呼不为空</p>
		</div>
		<button class="reg-btn" type="submit" @click="signup()">立即注册</button>
		<p class="reg-p">点击注册表示你同意<a href="">用户协议</a></p>
		</form>
	</div>
</template>

<script>
	export default{
		name:'companiessign',
		data(){
			return{
				username:'',
				passage1:'',
				passage2:'',
				companyname:'',
				person:'',
				usernameList:[],
				companiesList:[],
			}
		},
		methods:{
			signup:function(){
				for(var i = 0 ; i < this.usernameList.length ; i++)
				{
					if(this.username != this.usernameList[i])
					this.usernameList.push(this.username);
					else alert("用户名已存在");
				}
				for(var i = 0 ; i < this.companiesList.length ; i++)
				{
					if(this.companyname != this.companiesList[i])
					this.companiesList.push(this.companyname);
					else alert("公司名称已存在");
				}
				if(this.username && this.passage1 && this.passage2 && this.companyname && this.person)
				alert("注册成功");
				else alert("信息未填完");
			}
		}
	}
</script>

<style>
	.companies{
		width: 480px;
		height: 560px;
		background-color: #fcfcfe;
		margin: 30rem;
		line-height: 5rem;
		position: relative;
	}
	.companies > form > div > span:nth-child(1){
		color: red;
		margin-left: 5rem;
		justify-content: center;
		align-items: center;
	}
	.companies > form > div > span:nth-child(2){
		color: #6f6f71;
		justify-content: center;
		align-items: center;
	}
	.companies > form > div{
		position: relative;
	}
	.companies > form > div > p{
		position: absolute;
		font-size: 5px;
		top: 2rem;
		left: 12.8rem;
	}
	.companies > form > div > p:nth-child(1){
		color: #477f3e;
	}
	.companies > form > div > p:nth-child(2){
		color: #801d22;
	}
	.companies > form > div > p > img{
		width: 10px;
		height: 10px;
	}
	.companies > form > div > input{
		width: 150px;
		height: 26px;
		border: 1px solid #b7bbd4;
		outline: none;
		position: absolute;
		right: 8rem;
		margin-top: 1.8rem;
		z-index: 100;
	}
	.companies > form > div > input:hover{
		background-color: lightgoldenrodyellow;
	}
	.reg-btn{
		background-color: #4297e8;
		width: 152px;
		height: 26px;
		color: #edffff;
		margin-left: 12.5rem;
		cursor: pointer;
		outline: none;
		border: none;
		}
	.reg-p{
		color: #767678;
		font-size: 5px;
		margin-top: -2rem;
		margin-left: 12.5rem;
	}
	.reg-p > a{
		text-decoration: none;
		margin-left: 1rem;
		color: #6057a6;
	}
	.reg-p > a:hover{
		color: darkred;
	}
	.passagepower{
		width: 300px;
		height: 15px;
		position: relative;
	}
	.passagepower > span{
		color: #c2c2c4;
		font-size: 9px;
		position: absolute;
		top: -1.7rem;
		left: 12.9rem;
	}
	.poweritem1{
		background-color: #ff1e00;
		color: #b1b1b3;
		width: 20px;
		height: 10px;
		position: absolute;
		top: 0.4rem;
		left: 16.4rem;
	}
	.poweritem2{
		background-color: #f3e723;
		color: #b1b1b3;
		width: 20px;
		height: 10px;
		font-size: 5px;
		position: absolute;
		top: 0.4rem;
		left: 18rem;
	}
	.poweritem3{
		background-color: #b7e17f;
		color: #b1b1b3;
		width: 20px;
		height: 10px;
		font-size: 10px;
		position: absolute;
		top: 0.4rem;
		left: 19.6rem;
	}
</style>