js实现生成随机验证码

需求说明

用户登录界面，需要先通过前端层的校验，才允许用户发送手机验证码进一层校验。本篇文章为如何实现前端验证码校验。

实现思路

本人实现的步骤是背景颜色加随机四位字母或数字验证码，其实就是给一个css样式，加一个背景颜色，字体加一个颜色，模仿成一张图片的样式。用户输入后，把用户输入的四位验证码与随机生成的验证码作比较。如果校验时区分大小写，就把用户输入的验证码全部转为大写或者小写后再进行比较。

主要代码实现

1. 写一个随机生成四位验证码，包含大小写字母和数字；
2. 监听验证码输入框，如果输入了4位，就把用户输入的验证码全部转为大写，或者全部转为小写（这里是全部转为了小写），以便实现不区分大小写的校验功能；
3. 也可以不使用watch监听时间，而是在输入框上添加input事件或者change事件来判断用户输入的验证码是否正确。
4. 比较生成的随机四位验证码与用户输入的是否一致，一致就把发送验证码的按钮取消禁用状态（也可以自己添加校验成功 / 失败的后续逻辑）。

methods: {
// 生成四位验证码generateCode() {const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';let code = '';for (let i = 0; i < 4; i++) {const randomIndex = Math.floor(Math.random() * chars.length);code += chars.charAt(randomIndex);}this.randomCode = code},
}watch: {code(newVal) {if (newVal.length == 4 && newVal.toLowerCase() == this.randomCode.toLowerCase()) {this.sendbtnDisabled = false} else {this.sendbtnDisabled = true}}},

效果图