客户要求在登陆页面增加验证码,验证码校验通过才可以登录。
页面实现效果:
在代码实现过程,使用了canvas画布
代码分享:
html代码段
<div id='login-group'>
<div class='login-title'>用户登录</div>
<!-- 用户名 -->
<div class='input-group'>
<el-input class="input-group-class" size="large" placeholder="请输入账号" type='text' v-model='username'>
<i slot="prefix" class="el-input__icon el-icon-user"></i>
</el-input>
</div>
<!-- 密码 -->
<div class='input-group'>
<el-input class="input-group-class" size="large" placeholder="请输入密码" type='password' v-model='pwd'>
<i slot="prefix" class="el-input__icon el-icon-lock"></i>
</el-input>
</div>
<!-- 验证码 -->
<div id="canvas-input">
<el-input class="canvas-input-class" size="large" type='text' v-model="inputCode" placeholder="请输入右侧图案的值" />
<canvas class="codeCanvas" ref="checkCode" @click="getCode"> </canvas>
</div>
<!-- 记住密码 -->
<div class='rememberpwd'>
<el-checkbox v-model='checked' @change="oRemeber(checked)">记住密码</el-checkbox>
</div>
<el-button size="medium" :loading="loadingbut" type="primary" @click='clickLogin' class='login-btn'>{{ loadingbuttext }}</el-button>
</div>
注:因为css样式都不统一,这里就不分享css代码段了
js代码段
data() {
return {
// 验证码
inputCode: '', // 输入的值
checkCode: '', // 图片验证码的值
expressValue: '', // 表达式的值
// canvas各种设置
cvs: {
w: 300, // 给出默认宽度 宽度会在图片绘制时根据长度更改
h: 40, // 高 与input保持一致
fontSize: 24, // 字体大小
str: '+-*', // 符号生成范围
line: 3 // 噪音线个数
}
}
}
// canvas
// 随机整数生成器,范围[0, max)
rInt(max) {
return Math.floor(Math.random() * 100000 % max);
},
// 生成随机表达式
rCode() {
let a = this.rInt(100);
let b = this.rInt(10);
let op = this.cvs.str.charAt(this.rInt(this.cvs.str.length));
// 表达式
let code = `${a}${op}${b}=`;
this.checkCode = code;
// 表达式的值
// eslint-disable-next-line no-eval
this.expressValue = eval(code.substr(0, code.length - 1));
return code;
},
// 生成随机颜色 rgba格式
rColor() {
let a = ((Math.random() * 5 + 5) / 10).toFixed(2);
return `rgba(${this.rInt(256)}, ${this.rInt(256)}, ${this.rInt(256)}, ${a})`;
},
// 验证码图片绘制
drawCode(domCvs) {
console.log(domCvs);
let _this = this;
// 随机表达式
let checkCode = this.rCode();
// 宽设置
this.cvs.w = 10 + this.cvs.fontSize * this.checkCode.length;
// 判断是否支持canvas
if (domCvs !== null && domCvs.getContext && domCvs.getContext('2d')) {
// 设置显示区域大小
domCvs.style.width = _this.cvs.w;
console.log(_this.cvs.w);
// 设置画板宽高
domCvs.setAttribute('width', _this.cvs.w);
domCvs.setAttribute('height', 60);
// 画笔
let pen = domCvs.getContext('2d');
// 背景: 颜色 区域
pen.fillStyle = '#eee';
pen.fillRect(0, 10, _this.cvs.w, _this.cvs.h);
// 水平线位置
pen.textBaseline = 'middle'; // top middle bottom
// 内容
for (let i = 0; i < _this.checkCode.length; i ++) {
pen.fillStyle = _this.rColor(); // 随机颜色
pen.font = `bold ${_this.cvs.fontSize}px 微软雅黑`; // 字体设置
// 字符绘制: (字符, X坐标, Y坐标)
pen.fillText(checkCode.charAt(i), 10 + _this.cvs.fontSize * i, 30 + _this.rInt(10));
}
// 噪音线
for (let i = 0; i < _this.cvs.line; i ++) {
// 起点
pen.moveTo(_this.rInt(_this.cvs.w) / 2, _this.rInt(_this.cvs.h) + 10);
// 终点
pen.lineTo(_this.rInt(_this.cvs.w), _this.rInt(_this.cvs.h) + 10);
// 颜色
pen.strokeStyle = _this.rColor();
// 粗细
pen.lineWidth = '2';
// 绘制
pen.stroke();
}
} else {
this.$message.error('不支持验证码格式,请升级或更换浏览器重试');
}
},
// 点击时刷新二维码
getCode() {
let domCvs = this.$refs.checkCode;
this.drawCode(domCvs);
},
// 点击登录时做的校验
clickLogin() {
if (this.inputCode) {
// eslint-disable-next-line no-eval
if (eval(this.inputCode) === eval(this.expressValue)) {
// 验证成功要做的事
// this.$message.success('验证成功');
} else {
// 验证码有误
this.$message.error('验证码输入错误!');
return;
}
} else {
// 输入为空
this.$message.error('请输入右侧结果');
return;
}
//
let userCodeReg = /^[0-9a-zA-Z]+$/;
if (this.username === '') {
this.$message.error('请输入用户账号');
return;
}
if (! userCodeReg.test(this.username)) {
this.$message.error('用户账号不得使用中文或特殊符号');
return;
}
if (this.pwd === '') {
this.$message.error('请输入用户密码');
return;
}
this.login();
},
// 登录
login() {
// 请求登录接口
}
注:
- 为了方便,二维码只做了加减乘的运算
- 记得在初始化页面的时候就调用getCode方法。