|
|
@@ -0,0 +1,189 @@
|
|
|
+<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>
|
