Vue前端模拟生成验证码并且效验功能

大祥子
2021-09-15 / 0 评论 / 16 阅读 / 正在检测是否收录...

 遇到个登陆功能需要输入验证码,后端没接口,但是为了防止机器人恶意登陆还是要写个验证码效验的,活就跑到前端来了,利用随机数写的一个4位验证码。

//定义code用于存放验证码
      var code = ''
      // 设置长度,这里看需求,我这里设置为4
      var codeLength = 4
      // 设置随机字符
      // 这里可以写成字母,这样就可以随机生成字母验证码了
      var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9)
      // 循环codeLength 我设置的4就是循环4次
      for (var i = 0; i < codeLength; i++) {
        // 设置随机数范围,这设置为0 ~ 36
        var index = Math.floor(Math.random() * 9)
        // 字符串拼接 将每次随机的字符 进行拼接
        code += random[index]
      }
      // 将拼接好的字符串赋值给展示的code
      this.code = code

 效验功能就不写了,就是获取用户输入的验证码,和生成的验证码做对比,对就OK不对就告诉用户:吊毛你输入的验证码有误!

/* 让验证码变形,看起来更加像一点*/
  letter-spacing: 15px;
  transform:skew(45deg);
  transform: scale(1.,0.5);
0

评论 (0)

取消