上回，上次和大家简单的介绍了下web验证码实现，也说了异步刷新验证码的实现逻辑，不过有些小伙伴还是建议我实现下，废话少说，上代码：此代码是需要依赖：sanic==19.9.0Pillow==7.0.0

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

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

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

是个发送验证码时常用的功能，当用户点击【发送验证码】之后出现【重新获取60s后】。在倒计时期间禁止用户继续发送验证码，待倒计时结束之后才可以再次发送验证码。这个可以避免重复发送请求获取多个验证码信息（但是只有最后一次才是有效的），你也不知道自己发送了几次请求，当手机接收到验证码之后容易误以为是正确的验证码。所以做适当的控制是非常有必要的，同时也可以防止恶意发送请求消耗服务器资源。

HTML构建

为了方便这里我们用ElementUI来实现，在el-form-item中利用el-button按钮来实现验证码发送。发送验证码之后直接在el-button上修改现实中在HTML中的【发送验证码】内容，利用disabled属性来控制el-button的是否可以点击。

重新获取倒计时

定义一个retrieve()方法开启倒计时功能，利用setInterval计时器每隔一秒钟调用一次函数，当倒计时结束时通过clearInterval()来关闭计时器。这里我们需要做的是刷新时间和重定义el-button中的HTML内容，disable是用来控制el-button按钮是否可点击的属性。注意：disabled属性别用this.$refs.onConfirm.disbaled=true来定义，会报警告的：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "disabled"。

发送验证码

在发送之前我们需要对表单中的数据进行校验，这里为什么要嵌套两个validateField呢（validateField支持校验组数）？。因为validateField校验子表单数据时每校验一个值都会返回校验结果，当校验不通过时Error返回值为校验的提示信息，当通过时Error的值为空，所以我们在if语句中用(！Error）表示校验通过。那么这就存在一个问题如果校验数组的话就会进行多次校验，也就会发送多次验证请求。（点一次请求却收到多条验证码这显然是不合理的！）

总结：

这里主要的就是retrieve()方法的定义和动态改变HTML内容，可以利用Vue提供的$ref来快速的定位DOM元素实现属性的修改。以上内容是小编给大家分享的【Vue实战088：简单的验证码倒计时功能实现】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：

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