關於註冊頁面的總結

時間 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   }