关于注册页面的总结

时间 2019-12-13

标签关于注册页面总结繁體版

原文原文链接

　　作前端无可避免的须要写注册和登陆页面。今天先总结一下注册页面的一些经常使用元素css

1.form

　　注册表单提交使用。注册页面通常使用弹窗或单独的页面，表单涵盖所需的填写项，样式可在涵盖了所有项的基础上进行发挥扩展。html

2.参数校验和正则

　　在表单中，须要进行校验，常见的就是名称密码手机、验证码、手机验证码。前端

　　关于校验，前边的一篇正则中有提到经常使用的正则，能够配合form的rule进行校验。这里着重说一下前端生成验证码。vue

3.验证码

　　原理很简单，这里使用最初的字母数字校验。其余如数学计算、点击、滑动，等之后有时间再详细研究（先立个flag，由于最近实在是太忙了，仿佛头发都快要掉光了）。git

　　涉及的主要思想就是随机数，并利用随机来肯定是大写仍是小写。代码以下：github

 1 <template>
 2   <div><input type="button"  @click="createCode"  class="verification" v-model="checkCode"/></div>
 3 </template>
 4 
 5 <script>
 6 export default {
 7   data () {
 8     return {
 9       // 配置项：长度、范围
10       codeLength: 4,
11       codeRandom: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
12         'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L',
13         'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
14       checkCode: ''
15     }
16   },
17   methods: {
18     createCode () {
19       let code = ''
20       let index
21       let codeSlice
22       for (let i = 0; i < this.codeLength; i++) {
23         // 取得随机数的索引（0~35）
24         index = Math.floor(Math.random() * 36)
25         // 根据索引取得随机数加到code上
26         if (Math.random() * 2 > 1) {
27           codeSlice = this.codeRandom[index].toLowerCase()
28         } else {
29           codeSlice = this.codeRandom[index]
30         }
31         code += codeSlice
32       }
33       // 把code值赋给验证码
34       this.checkCode = code
35     }
36   },
37   mounted () {
38     this.createCode()
39   }
40 }
41 </script>
42 <style lang='scss' scoped>
43 .idtc_input{
44         font-family: 'Exo 2', sans-serif;
45     border: 1px solid #fff;
46     color: #fff;
47     outline: none;
48     border-radius: 12px;
49     letter-spacing: 1px;
50     font-size: 17px;
51     font-weight: normal;
52         background-color: rgba(82, 56, 76, 0.15);
53         padding: 5px 0 5px 10px;
54     margin-left: 30px;
55     height: 30px;
56     margin-top: 25px;
57     border: 1px solid #e6e6e6;
58 }
59 .verification{
60     border-radius: 12px;
61     width:100%;
62     letter-spacing:10px;
63     /* margin-left: 50px; */
64     height: 40px;
65     /* transform: translate(-15px,0); */
66     background: linear-gradient(to top right, #a5a5a2 0%, #f5f5f5 55%, #cecdc0 100%);
67     cursor: pointer;
68 }
69 .captcha{
70     height: 50px;
71     text-align: justify;
72 }
73 </style>

　　这里是用的vue。算法

4.密码强度校验

　　目前暂时没有单独抽出组件，仍是由于时间的问题，下次再进行抽取。安全

　　基本思想是根据密码的包含字符的种类数进行积分式的计算。更复杂的算法之后会考虑。dom

　　代码：学习

 1 // html
 2 <el-form-item prop="password">
 3           <el-input v-model="registerForm.password" placeholder="密码（6-20位，数字/字母/符号及其组合）" type="password" autocomplete="off" show-password></el-input>
 4           <el-progress :percentage="pwdLevel" :format="format" :color="levelColor"></el-progress>
 5         </el-form-item>
 6 <el-form-item>
 7           <el-row>
 8             <el-col :span="12"><el-input placeholder="短信验证码" v-model="registerForm.msgCode"></el-input></el-col>
 9             <el-col :span="4">&nbsp;</el-col>
10             <el-col :span="8">
11               <el-button style="width:100%" type="primary" :disabled="sendDisable" @click="sendMsg">{{sendText}}</el-button>
12             </el-col>
13           </el-row>
14         </el-form-item>
15 // 部分data
16 pwdLevel: 0,
17       levelColor: '#f56c6c',
18       checkCode: '',
19       sendDisable: false,
20       sendText: '获取验证码',
21       timeSpace: 60,
22       agree: false,
23       regPaperShow: false,
24       nameReg: /^[\u4E00-\u9FA5a-zA-Z0-9_]{3,20}$/,
25       pdwReg: /^[a-zA-Z0-9`~!@#$^&*()=|{}':;',\\[\].<>\\/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]{6,20}$/,
26       phoneReg: /^1[34578]\d{9}$/
27 
28 methods: {
29     format (pct) {
30       // 作一个密码非法的标志--1--也能够用form校验
31       return pct > 80 ? '密码很是安全' : pct > 60 ? '密码安全' : pct > 40 ? '密码通常' : pct === 0 ? '' : pct === 1 ? '密码不知足要求' : '密码危险'
32     },
33     checkPwdLevel (val) {
34       this.pwdLevel = 0
35       if (this.pdwReg.test(val)) {
36         // 采用简单的组合方式校验，暂不校验复杂度类似性等
37         if (/[a-z]/.test(val)) this.pwdLevel += 25
38         if (/[A-Z]/.test(val)) this.pwdLevel += 25
39         if (/[0-9]/.test(val)) this.pwdLevel += 25
40         if (/[`~!@#$^&*()=|{}':;',\\[\].<>\\/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]/.test(val)) this.pwdLevel += 25
41         switch (this.pwdLevel) {
42           case 0:
43           case 25:
44             this.levelColor = 'red'
45             break
46           case 50:
47             this.levelColor = '#e6a23c'
48             break
49           case 75:
50             this.levelColor = '#1989fa'
51             break
52           case 100:
53             this.levelColor = '#5cb87a'
54             break
55           default:
56             this.levelColor = '#e6a23c'
57             break
58         }
59       }
60     },
61     sendMsg () {
62       this.sendDisable = true
63       this.timeSpace = 60
64       this.sendText = this.timeSpace
65       const timeInterval = setInterval(() => {
66         this.timeSpace--
67         this.sendText = this.timeSpace
68         if (this.timeSpace === 0) {
69           this.sendDisable = false
70           this.sendText = '获取验证码'
71           clearInterval(timeInterval)
72         }
73       }, 1000)
74     }
75   }

　　一样是使用的vue，思路就是使用el的进度条组件，使用正则来确认密码复杂度并进行相加，最后映射到进度上，并使用相关提示文字进行密码强度的校验。

5.手机验证码倒计时

　　代码片断在4中，思想就是使用disabled属性和定时器进行计时和控制。

　　这里只介绍思想和关键的代码逻辑供学习探讨，具体代码可参看我的git库：

https://github.com/MRlijiawei/components/tree/master/vue%E7%BB%84%E4%BB%B6/register/user

　　好了，工地忙，老板让半个月一我的造一个涵盖门户、登陆注册、课程、资源、交易、我的中心、资源预览学习下载购买、区块链虚拟货币、充值、任务积分、各种型教育等页面的系统出来，人都要疯掉了，仿佛在开玩笑同样呢，好了不说了，滚一边搬砖去了！