在登录界面中我们经常会遇到需要校验验证码才能登录，验证码是由一串随机产生的字母、数字或符号组成。目的是为了防止用户利用机器人自动注册、恶意登录、刷票灌水等操作，验证码技术可以适当的提高服务的安全性，提升用户体验。常见的验证码有随机字符、汉字图片、字符图片、算术、问答、滑块、坐标、旋转、滑动拼图、文字点选、图标点选、推理拼图、语序点选、空间推理、短信、语音、智能无感知等验证方式，最简单的应该是随机字符验证了（安全级别最低！）。

HTML模板构建

在template模板中绑定一个动态的style样式，利用check来改变图标的颜色提示用户验证码输入正确，如果验证码错误则利用message弹出警示框提示。点击验证码位置触发refreshCode重新调用createCode来刷新验证码，handleLogin为键盘事件触发登录。

最简单的验证码

利用Math.random()随机生成一个0-1之间的随机double值，根据random随机数组中的数据随机出索引值，再通过索引值获取到对应的随机值。随机的长度通过len来限制，将每次随机出的数据追加到code中即可得到随机的验证码。

验证码效验

这里不能通过el-form中的rules来校验验证码的正确与否，因为在data中定义checkCode 无法获取到this.createdCode值（undefined）。这里我们利用el-input的blur失去焦点事件来触发验证，如果你想在用户输入的时候就验证可以使用input事件在Input值改变时触发。

总结：

这里只是一个简单的验证逻辑，真正的应用上随机字符基本不会被使用。因为随机字符验证安全性太低了，模拟操作可以很容易的通过DOM获取到相应的验证码。以上内容是小编给大家分享的【Vue实战089：最简单的登录验证码功能实现】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：

专栏

Vue实战系列

作者：编程手札

29.9币

120人已购

查看

为了方便学习，下面附上本文用到的源码：

"vercode">
  "vercode"
              :style="{color:check? \'green\':\'rgb(204, 201, 201)\'}" />
  <el-input class="login-vercode" v-model="loginForm.vercode"
            placeholder="请输入验证码"prefix-icon="icon-login_auth"
            @blur="checkCode" @keydown.enter.native="handleLogin">
  input>
  "refreshCode" @click="refreshCode">{{ createdCode}}
createCode () {  let code = \'\'
  let len = 4 // 验证码的长度
  let random = new Array(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\', \'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\') // 随机内容
  for (let i = 0; i < len; i  ) { // 循环操作
    let index = Math.floor(Math.random() * 62) // 取得随机数的索引（0~62）
    console.log(\'Math.random()\', index)
    code  = random[index] // 根据索引取得随机数加到code上
  }  this.createdCode = code // 把code值赋给验证码}//无法获取到this.createdCode值const checkCode = function (rule, value, callback) {
  if (value !== this.createdCode) {
    callback(new Error(\'验证码错误\'))
  } else {
    callback()  }}//利用el-input的blur失去焦点事件来触发验证
checkCode () {  if (this.loginForm.vercode !== this.createdCode) {
    this.$message({      message: \'验证码错误，注意大写字母\',
      type: \'warning\'
    })  } else {
    this.check = true
  }}

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/11718.html