做前端无可避免的需要写注册和登录页面。今天先总结一下注册页面的一些常用元素
1.form
注册表单提交使用。注册页面一般使用弹窗或单独的页面，表单涵盖所需的填写项，样式可在涵盖了全部项的基础上进行发挥扩展。
2.参数校验和正则
在表单中，需要进行校验，常见的就是名称密码手机、验证码、手机验证码。
关于校验，前边的一篇正则中有提到常用的正则，可以配合form的rule进行校验。这里着重说一下前端生成验证码。
3.验证码
原理很简单，这里使用最初的字母数字校验。其他如数学计算、点击、滑动，等以后有时间再详细研究（先立个flag，因为最近实在是太忙了，仿佛头发都快要掉光了）。
涉及的主要思想就是随机数，并利用随机来确定是大写还是小写。代码如下：
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.密码强度校验
目前暂时没有单独抽出组件，还是因为时间的问题，下次再进行抽取。
基本思想是根据密码的包含字符的种类数进行积分式的计算。更复杂的算法以后会考虑。
代码：
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"> </el-col> 10 <el-col :span="8"> 11 <el-button style="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
好了，工地忙，老板让半个月一个人造一个涵盖门户、登录注册、课程、资源、交易、个人中心、资源预览学习下载购买、区块链虚拟货币、充值、任务积分、各类型教育等页面的系统出来，人都要疯掉了，仿佛在开玩笑一样呢，好了不说了，滚一边搬砖去了！