微信小程序——有关图形验证码的所有信息

今天写一个有关图形验证码的笔记，先看效果图：

第一个问题图形验证码怎么制作出来的呢？看代码：
wxml:

 <canvas canvas-id="canvas" bindtap='change' style="width:200rpx;height: 70rpx;" ></canvas>

CSS 样式写在这里就是随手，方便。
JS：

// indexSecond/pages/helpTake/helpTake.js
var app = getApp();
var baseUrl = getApp().baseUrl;
var ctx;
Page({/*** 页面的初始数据*/data: {btn_disabled: true,Number: true,text: ""},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;this.drawPic(that);},change: function () {var that = this;this.drawPic(that);},mobile(e) {this.setData({mobile: e.detail.value})},randomNum(min, max) {return Math.floor(Math.random() * (max - min) + min);},/**生成一个随机色**/randomColor(min, max) {let r = this.randomNum(min, max);let g = this.randomNum(min, max);let b = this.randomNum(min, max);return "rgb(" + r + "," + g + "," + b + ")";},/**绘制验证码图片**/drawPic(that) {ctx = wx.createCanvasContext('canvas');/**绘制背景色**/ctx.fillStyle = this.randomColor(180, 240); //颜色若太深可能导致看不清ctx.fillRect(0, 0, 90, 28)/**绘制文字**/var arr;var text = '';var str = 'ABCEFGHJKLMNPQRSTWXY123456789';for (var i = 0; i < 4; i++) {var txt = str[this.randomNum(0, str.length)];ctx.fillStyle = this.randomColor(50, 160); //随机生成字体颜色ctx.font = this.randomNum(20, 26) + 'px SimHei'; //随机生成字体大小var x = 5 + i * 20;var y = this.randomNum(20, 25);var deg = this.randomNum(-20, 20);//修改坐标原点和旋转角度ctx.translate(x, y);ctx.rotate(deg * Math.PI / 180);ctx.fillText(txt, 5, 0);text = text + txt;//恢复坐标原点和旋转角度ctx.rotate(-deg * Math.PI / 180);ctx.translate(-x, -y);}/**绘制干扰线**/for (var i = 0; i < 4; i++) {ctx.strokeStyle = this.randomColor(40, 180);ctx.beginPath();ctx.moveTo(this.randomNum(0, 90), this.randomNum(0, 28));ctx.lineTo(this.randomNum(0, 90), this.randomNum(0, 28));ctx.stroke();}/**绘制干扰点**/for (var i = 0; i < 20; i++) {ctx.fillStyle = this.randomColor(0, 255);ctx.beginPath();ctx.arc(this.randomNum(0, 90), this.randomNum(0, 28), 1, 0, 2 * Math.PI);ctx.fill();}ctx.draw(false,function(){that.setData({text:text})})console.log(text)},})

到这里图形验证码已经能制作出来了，点击会自动更新验证码。如果这一步没有弄出来，应该是我删代码删多了，不过问题不大，最后我会把所有代码发出来。
接下来就是，用户输入的验证码和图形验证码进行一个验证，主要看看用户有没有输入错误，并且弹出一个提示框。
思路：
1.获取用户在input中输入的验证码。
2.用户输入的验证码与图形上生成的验证码进行比较。
3.怎么比较呢？肯定是不区分大小写比较。
这里记住几个东西，如下所示：

bindinput 这个是绑定事件用的

<input placeholder="请输入验证码" bindinput="CompleNum"></input>

2.键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，
cursor 这个是判断你在input中输入数字字母的长度
2. **toLowerCase()**和 toUpperCase()
toUpperCase()：把字符串转换为大写；
toLowerCase() ：把字符串转换为小写。
因为我的图形验证码我设置的全部都是大写字母，所以我只用toLowerCase()这个就行了。
js:

 // 获取验证码数值CompleNum(e){console.log(e.detail.value)var Number = this.data.text    //获取另一个函数中的验证码数据if(e.detail.value.toUpperCase()!== Number && e.detail.cursor == 4){wx.showToast({title: '验证码错误',icon:"error"})}},

意思就是如果用户输入的数字或者字母不等于图形验证码并且输入的字母或者数字长度等于4，
则弹出框提示验证码错误。如下图：

全部代码如下：
wxml：

<!-- 个人信息注册 -->
<view class="container">
<view class="cu-form-group margin-top"><view class="title">姓名</view><input placeholder="请输入您的真实姓名"></input></view><view class="cu-form-group"><view class="title">学号</view><input placeholder="请输入您的真实学号"></input></view><view class="cu-form-group"><view class="title">宿舍</view><input placeholder="请输入您的宿舍号"></input></view><view class="cu-form-group"><view class="title">手机号码</view><input placeholder="请输入手机号码"></input><view class="cu-capsule radius"><view class="cu-tag bg-blue">+86</view><view class="cu-tag line-blue">中国大陆</view></view></view><view class="cu-form-group"><view class="title">验证码</view><input placeholder="请输入验证码" bindinput="CompleNum"></input><!-- <button type="primary" size="mini" class="butt"  wx:if="{{Number}}" bindtap="Comple">验证码</button> --><canvas canvas-id="canvas" bindtap='change' style="width:200rpx;height: 70rpx;" ></canvas></view>
</view>
<!--收款提示-->
<view class="prompt">提示： 本页面仅限在校学生注册个人信息使用。
</view>
<!--相关协议-->
<checkbox-group bindchange="bindAgreeChange"><label class="weui-agree" for="weuiAgree"><view class="weui-agree__text"><checkbox class="weui-agree__checkbox" id="weuiAgree" value="agree" checked="{{}}" /><view class="weui-agree__checkbox-icon"><icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" wx:if="{{isAgree}}"></icon></view>阅读并同意<navigator url="../helpTake/laywer" class="weui-agree__link">《相关法律条款》</navigator></view></label>
</checkbox-group>
<!--提交按钮-->
<view class="weui-btn"><button class="btn"  bindtap='submit' disabled='{{btn_disabled}}' hover-class="btn-hover">点 击 注 册</button></view>

CSS：

.cu-form-group .title {min-width: calc(4em + 30rpx);
}
.container{border-radius: 10rpx;
}
.cu-form-group .butt{width: 200rpx;height: 65rpx;font-size: 35rpx;
}
/*收款提示*/
.prompt{font-size: 30rpx;margin: 20rpx;color:red;}
.weui-btn .btn{/* width: 80%; */background-color:#4169E1 ;color: white;box-shadow: 1rpx 1rpx 1px 3rpx rgb(172, 169, 169);
}
.btn-hover{position: relative;top: 3rpx;
}

js：

// indexSecond/pages/helpTake/helpTake.js
var app = getApp();
var baseUrl = getApp().baseUrl;
var ctx;
Page({/*** 页面的初始数据*/data: {btn_disabled: true,Number: true,text: ""},// 获取验证码数值CompleNum(e){console.log(e.detail.value)// var that = this// that.setData({//   text// })var Number = this.data.text    //获取另一个函数中的验证码数据if(e.detail.value.toUpperCase() !== Number && e.detail.cursor == 4){wx.showToast({title: '验证码错误',icon:"error",duration:2000})}},// 验证码// Comple(e) {//this.setData({//   Number: false//  })//   },/**相关协议 法律文件 */bindAgreeChange: function (e) {//  console.log(e.detail.value)this.setData({isAgree: e.detail.value.length,})if (e.detail.value.length == 1) {this.setData({btn_disabled: false,})} else {//onsole.log(e.detail.value.length)this.setData({btn_disabled: true})}},/**确定按钮 */submit(e) {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;this.drawPic(that);},change: function () {var that = this;this.drawPic(that);},mobile(e) {this.setData({mobile: e.detail.value})},randomNum(min, max) {return Math.floor(Math.random() * (max - min) + min);},/**生成一个随机色**/randomColor(min, max) {let r = this.randomNum(min, max);let g = this.randomNum(min, max);let b = this.randomNum(min, max);return "rgb(" + r + "," + g + "," + b + ")";},/**绘制验证码图片**/drawPic(that) {ctx = wx.createCanvasContext('canvas');/**绘制背景色**/ctx.fillStyle = this.randomColor(180, 240); //颜色若太深可能导致看不清ctx.fillRect(0, 0, 90, 28)/**绘制文字**/var arr;var text = '';var str = 'ABCEFGHJKLMNPQRSTWXY123456789';for (var i = 0; i < 4; i++) {var txt = str[this.randomNum(0, str.length)];ctx.fillStyle = this.randomColor(50, 160); //随机生成字体颜色ctx.font = this.randomNum(20, 26) + 'px SimHei'; //随机生成字体大小var x = 5 + i * 20;var y = this.randomNum(20, 25);var deg = this.randomNum(-20, 20);//修改坐标原点和旋转角度ctx.translate(x, y);ctx.rotate(deg * Math.PI / 180);ctx.fillText(txt, 5, 0);text = text + txt;//恢复坐标原点和旋转角度ctx.rotate(-deg * Math.PI / 180);ctx.translate(-x, -y);}/**绘制干扰线**/for (var i = 0; i < 4; i++) {ctx.strokeStyle = this.randomColor(40, 180);ctx.beginPath();ctx.moveTo(this.randomNum(0, 90), this.randomNum(0, 28));ctx.lineTo(this.randomNum(0, 90), this.randomNum(0, 28));ctx.stroke();}/**绘制干扰点**/for (var i = 0; i < 20; i++) {ctx.fillStyle = this.randomColor(0, 255);ctx.beginPath();ctx.arc(this.randomNum(0, 90), this.randomNum(0, 28), 1, 0, 2 * Math.PI);ctx.fill();}ctx.draw(false,function(){that.setData({text:text})})console.log(text)},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})

微信小程序——有关图形验证码的所有信息相关推荐

uniapp 微信小程序获取图形验证码解决方案
写这篇博客的初衷是,自己陷入深坑,爬了好久,前端小白,记录一下吧.. **问题:**在登录时候,需要获取图形验证码来验证登录,接口返回的是base64,直接可以用base64来显示图片,没毛病吧,我也 ...
微信小程序的图形验证码实现
1.wxml页面 <canvas canvas-id="canvas" bindtap='change' style="width:90px;height: 30p ...
微信小程序 vue 滑块验证码
前提:之前写的vue版滑块验证码,可以在h5和web使用,但是在微信小程序运行就有问题.因此进行一系列的修改一.vue版滑块验证码实现地址 vue 图片拖拽验证码_周皮皮皮皮皮皮的博客-CSDN博客 ...
微信小程序之获取验证码js
在微信小程序中怎样实现获取验证码的倒计时功能捏,倒计时的原理是一样一样的,就是某些地方需要注意. 第一步:结构 <view class='get-code' wx:if="{{!isS ...
微信小程序获取手机验证码短信验证码后端功能实现解析
本文原创首发CSDN,链接 https://mp.csdn.net/console/editor/html/106041472 ,作者博客https://blog.csdn.net/qq_414641 ...
微信小程序中短信验证码登录全流程及代码
才开始学习小程序,用到短信验证码登录免费注册账号: http://sms_developer.zhenzikj.com/zhenzisms_user/register.html 完整demo下载: ...
Django搭建服务器，和微信小程序通信，验证码存入redis，用户信息存入mysql以及图片上传
写在前面:整体是实现小程序的登录和注册,并接收验证码进行校验. 一.创建项目 django-admin startproject wxTest 二.注册app,进入到wxTest目录中 python ...
微信小程序多位验证码/密码输入框
微信小程序IDE链接 developers.weixin.qq.com/s/07iQrdmZ7- 源码 github.com/richard1015- 转载于:https://juejin.im/po ...
微信小程序实现滑块验证码
老规矩,先上Demo: 思路创建2个canvas,一个当作背景,一个当作拼图. 传入3个参数,x:canvas中裁剪区域的横坐标,y:canvas中裁剪区域的纵坐标,l:拼图的边长背景图使用fi ...

微信小程序——有关图形验证码的所有信息

微信小程序——有关图形验证码的所有信息相关推荐

最新文章

热门文章