Vue实战089：最简单的登录验证码功能实现

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

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实战技巧可以参考以下专栏：

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

<el-form-item prop="vercode">

<span><svg-icon icon-class="vercode"

:style="{color:check? 'green':'rgb(204, 201, 201)'}" /></span>

<el-input class="login-vercode" v-model="loginForm.vercode"

placeholder="请输入验证码"prefix-icon="icon-login_auth"

@blur="checkCode" @keydown.enter.native="handleLogin">

</el-input>

<span class="refreshCode" @click="refreshCode">{{ createdCode}}</span>

</el-form-item>

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

}

vue实现简单留言板功能的具体代码

作为一个刚开始接触vue的前端小白，我想在这里记录一些学习过程，希望和大家一起进步，如有不妥处之处，请多多指教呦。

今天呢，是我学习vue的第二天，我想制作一个简易的留言板。功能很简单，就是数据的增删改查，下面开始步入正题：

大致布局如下：

1.html布局

如果大家不想自己去写css样式，使用bootstrap框架是一个很好地选择，它提供了一套响应式、移动设备优先的流式栅格系统。

2.数据如下：由于没有连接数据库，所以采用了模拟数据

3.增加（发表）功能：

用户输入的昵称和内容都采用了双向绑定，时间是获取的当下时间，发表按钮使用@click指令绑定了add函数。发表完后将昵称和内容框清空。

4.删除功能：

删除按钮绑定del,点击时删除一条评论，清屏按钮绑定clear，点击时删除所有评论。

5.修改功能：

点击修改，改变vm.bl的值，并记录当前评论的昵称，修改框使用了v-show指令，当vm.bl值为false时显示。点击确认修改，根据当前昵称寻找到要修改的评论，修改它的内容和发表时间。

6.查询功能：

查询功能依赖的是查询框输入的内容，因而使用了计算属性。以上就是关于本文的全部内容，希望对大家的学习有所帮助。