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

系统管理员 2022-05-17 10:06 131阅读 0赞

**一：登陆页面**  
效果图：  
![这里写图片描述][70]

样式问题：  
背景页面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的要点。

**二： 注册页面**  
效果图：  
![这里写图片描述][70 1]  
注册页面的技术要点没多少，还是表单的问题  
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’) 是当验证密码存在时，重新输入密码，我们要将根据第二次的输入密码作为判断，当输入不同时，就会触发两次密码不同的提示  
另外验证密码，不要一开始刚输入就显示不一样，要在输入长度一样之后再判断，给用户比较好的体验。

[70]: /images/20220517/30e4b38f1fed4efe84a55395b2d4c849.png
[70 1]: /images/20220517/1326bff87a354cf080e24522d6515475.png