关于注册页面的总结

　　做前端无可避免的需要写注册和登录页面。今天先总结一下注册页面的一些常用元素

1.form

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

2.参数校验和正则

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

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

3.验证码

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

　　涉及的主要思想就是随机数，并利用随机来确定是大写还是小写。代码如下：

<template>
  <div><input type="button"  @click="createCode"  class="verification" v-model="checkCode"/></div>
</template>

<script>
export default {
  data () {
    return {
      // 配置项：长度、范围
      codeLength: 4,
      codeRandom: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L',
        'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      checkCode: ''
    }
  },
  methods: {
    createCode () {
      let code = ''
      let index
      let codeSlice
      for (let i = 0; i < this.codeLength; i++) {
        // 取得随机数的索引（0~35）
        index = Math.floor(Math.random() * 36)
        // 根据索引取得随机数加到code上
        if (Math.random() * 2 > 1) {
          codeSlice = this.codeRandom[index].toLowerCase()
        } else {
          codeSlice = this.codeRandom[index]
        }
        code += codeSlice
      }
      // 把code值赋给验证码
      this.checkCode = code
    }
  },
  mounted () {
    this.createCode()
  }
}
</script>
<style lang='scss' scoped>
.idtc_input{
        font-family: 'Exo 2', sans-serif;
    border: 1px solid #fff;
    color: #fff;
    outline: none;
    border-radius: 12px;
    letter-spacing: 1px;
    font-size: 17px;
    font-weight: normal;
        background-color: rgba(82, 56, 76, 0.15);
        padding: 5px 0 5px 10px;
    margin-left: 30px;
    height: 30px;
    margin-top: 25px;
    border: 1px solid #e6e6e6;
}
.verification{
    border-radius: 12px;
    width:100%;
    letter-spacing:10px;
    /* margin-left: 50px; */
    height: 40px;
    /* transform: translate(-15px,0); */
    background: linear-gradient(to top right, #a5a5a2 0%, #f5f5f5 55%, #cecdc0 100%);
    cursor: pointer;
}
.captcha{
    height: 50px;
    text-align: justify;
}
</style>

　　这里是用的vue。

4.密码强度校验

　　目前暂时没有单独抽出组件，还是因为时间的问题，下次再进行抽取。

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

　　代码：

// html
<el-form-item prop="password">
          <el-input v-model="registerForm.password" placeholder="密码（6-20位，数字/字母/符号及其组合）" type="password" autocomplete="off" show-password></el-input>
          <el-progress :percentage="pwdLevel" :format="format" :color="levelColor"></el-progress>
        </el-form-item>
<el-form-item>
          <el-row>
            <el-col :span="12"><el-input placeholder="短信验证码" v-model="registerForm.msgCode"></el-input></el-col>
            <el-col :span="4">&nbsp;</el-col>
            <el-col :span="8">
              <el-button style="100%" type="primary" :disabled="sendDisable" @click="sendMsg">{{sendText}}</el-button>
            </el-col>
          </el-row>
        </el-form-item>
// 部分data
pwdLevel: 0,
      levelColor: '#f56c6c',
      checkCode: '',
      sendDisable: false,
      sendText: '获取验证码',
      timeSpace: 60,
      agree: false,
      regPaperShow: false,
      nameReg: /^[u4E00-u9FA5a-zA-Z0-9_]{3,20}$/,
      pdwReg: /^[a-zA-Z0-9`~!@#$^&*()=|{}':;',\[].<>\/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]{6,20}$/,
      phoneReg: /^1[34578]d{9}$/

methods: {
    format (pct) {
      // 做一个密码非法的标志--1--也可以用form校验
      return pct > 80 ? '密码非常安全' : pct > 60 ? '密码安全' : pct > 40 ? '密码一般' : pct === 0 ? '' : pct === 1 ? '密码不满足要求' : '密码危险'
    },
    checkPwdLevel (val) {
      this.pwdLevel = 0
      if (this.pdwReg.test(val)) {
        // 采用简单的组合方式校验，暂不校验复杂度相似性等
        if (/[a-z]/.test(val)) this.pwdLevel += 25
        if (/[A-Z]/.test(val)) this.pwdLevel += 25
        if (/[0-9]/.test(val)) this.pwdLevel += 25
        if (/[`~!@#$^&*()=|{}':;',\[].<>\/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]/.test(val)) this.pwdLevel += 25
        switch (this.pwdLevel) {
          case 0:
          case 25:
            this.levelColor = 'red'
            break
          case 50:
            this.levelColor = '#e6a23c'
            break
          case 75:
            this.levelColor = '#1989fa'
            break
          case 100:
            this.levelColor = '#5cb87a'
            break
          default:
            this.levelColor = '#e6a23c'
            break
        }
      }
    },
    sendMsg () {
      this.sendDisable = true
      this.timeSpace = 60
      this.sendText = this.timeSpace
      const timeInterval = setInterval(() => {
        this.timeSpace--
        this.sendText = this.timeSpace
        if (this.timeSpace === 0) {
          this.sendDisable = false
          this.sendText = '获取验证码'
          clearInterval(timeInterval)
        }
      }, 1000)
    }
  }

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

5.手机验证码倒计时

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

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

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

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