vue做一个有验证码的登陆页面和注册页面，敲回车登陆

一：登陆页面
效果图：

样式问题：
背景页面UI给的尺寸比较小的情况下，如何按比例不平埔背景呢？

.login {
  width: 100%;
  padding-bottom: 62.5%;
  height: 0;
  background: url('../../images/login.jpg') no-repeat center center fixed;
  background-size: cover;
  background-color: #0C1424;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

首先宽度是100%。高度是0，我们使用padding-bottom来固定宽高比
最最重要的是，不平埔还能展示全屏就是使用css3的background-size: cover 属性了，注意做一下兼容。

我们使用element ui 的表单验证，可以控制输入的字符串格式，当我们做验证码的时候，希望只输入4个字符便不能输了，当输入大于四个字符时就截取掉后面的，并赋值给输入框。

        vcode: [
          {required: true, validator: validateVcode, triger: 'blur'}
        ]
data () 中定义：
    var validateVcode = (rule, value, callback) => {
      // 将用户输入数字转成字符串，同时转换成大写
      value = value + ''
      if (value.length > 4) {
        value = value.substring(0, 4)
        this.$set(this.loginInfo, 'vcode', value)
      }
    }

随机生成验证码，在页面一加载完毕就执行该函数生成一个验证码。

  mounted () {
    this.generatedCode()
  },

在methods中：
    generatedCode () {
      const random = [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']
      let code = ''
      for (let i = 0; i < 4; i++) {
        let index = Math.floor(Math.random() * 36)
        code += random[index]
      }
      this.ccode = code
    }

当用户点击生成码可以生成一个新的验证码，所以给该生成码标签绑定一个点击事件，在点击 后执行生成验证码函数。

    // 点击生成验证码
    handleCode () {
      this.generatedCode()
    }

当我们输入验证码完成之后，需要验证输入的和我们生成的是否一致，所以需要一个判断输入验证码是否正确的函数。

    // 判断验证码是否输入准确
    checkCode () {
      let vcode = this.loginInfo.vcode
      vcode = vcode.toUpperCase()
      let ccode = this.ccode
      ccode = ccode.toUpperCase()
      if (vcode !== ccode) {
        this.$message.error('Please enter the correct verification code!')
        this.$set(this.loginInfo, 'vcode', '')
        this.$set(this.loginInfo, 'password', '')
      } else {
        return 1
      }
    },

当点击登陆按钮的时候，开始验证，我们在登录按钮上绑定验证表单的事件<el-button @click="handleSubmit('loginFrom')">Login</el-button>
思路： 首先在验证表单之前先验证验证码是否正确，正确的话才开始验证表单，验证码不正确弹出验证码输入有误！
第二步：表单如果验证成功，那么就发送用户信息到后台登陆，如果验证不成功的话，弹出表单填写不正确
第三步：发送请求到后台，如果用户信息正确登陆成功，执行登陆成功的函数，将数据存储在本地
如果用户名或者密码不对，请求出错，则报用户名或者密码不对！

具体代码如下：

    handleSubmit (formName) {
      let codestatus = this.checkCode()
      // 先验证输入的验证码是否相同，相同再做密码和输入框的正确与否
      if (codestatus) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.get('/rest/login.json')
              .then(this.loginInfoSucc)
          } else {
            this.$message.error('Please enter a valid username or password')
            return false
          }
        })
      } else {
        this.$message.error('Please enter the correct verification code!')
        this.$set(this.loginInfo, 'vcode', '')
        this.$set(this.loginInfo, 'password', '')
      }
    },
     loginInfoSucc (res) {
      res = res.data
      if (res.payload && !res.status) {
        // 保存菜单的配置
        const allInfo = res.payload
        this.$store.dispatch('configurationInfo', allInfo)
        // 保存用户名的配置
        let userInfo = {}
        if (this.remember) {
          this.$set(userInfo, 'employeeid', this.loginInfo.employeeid)
          this.$set(userInfo, 'password', this.loginInfo.password)
        } else {
          this.$set(userInfo, 'employeeid', '')
          this.$set(userInfo, 'password', '')
        }
        this.$store.commit('saveUserInfo', userInfo)
        // 设置数据源的开关为SAP
        let dataswitch = false
        this.$store.commit('switchData', dataswitch)
        this.$router.push('/home')
      } else {
        this.$message.error('Incorrect user name or password')
      }
    }

现在我们实现了点击登陆，用户体验度做的好一点，还希望完成敲回车直接登陆，
我们输入完验证码敲回车，也去执行登陆的触发时间就可以了。
在验证码的输入框中加上@keyup.enter,native ="handleSubmit('loginFrom')" 即可
ok,暂时登陆页面的技术总结完毕，后续应该会添加localStroage的要点。

二： 注册页面
效果图：

注册页面的技术要点没多少，还是表单的问题
1.遇到比较麻烦的一点是，在from中select组件修改全局样式无效，因为select组件生成的下拉菜单不在父级div中，而是在与app同级的div中，解决这个问题是给select添加一个叫prop-class的属性，该属性是给下拉菜单定义一个类名，在该类下修改样式就可以了。
2. password 验证是使用自定义验证的。

    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('please input password'))
      } else {
        if (this.registerInfo.cpassword !== '') {
          this.$refs.registerForm.validateField('cpassword')
        }
        callback()
      }
    }
    var validateCPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('input password again'))
      } else if (value.length >=this.registerInfo.password.length && value !== this.registerInfo.password) {
        callback(new Error('The two passwords do not match!'))
      } else {
        callback()
      }
    }

this.$refs.registerForm.validateField(‘cpassword’) 是当验证密码存在时，重新输入密码，我们要将根据第二次的输入密码作为判断，当输入不同时，就会触发两次密码不同的提示
另外验证密码，不要一开始刚输入就显示不一样，要在输入长度一样之后再判断，给用户比较好的体验。