登录、注册表单旁边常挂一块歪歪扭扭的验证码。本例用 Canvas 在容器里画四位数字或字母，点图换一张，输入后点验证比对。类型可混合、纯数字或纯字母。

入口是 index.html。样式在 css/verify.css，画码在 js/gVerify.js，按钮逻辑在 js/verify.js。脚本先引 jQuery 和 Layui，再引 gVerify.js、verify.js。顺序反了，$ 或 layer 会挂。

图形验证码用到哪些文件

html 里按这个顺序引：

页面就这几样：一块 #v_container 用来挂画布，一个 #code_input，一个 #my_button。new GVerify(“v_container”) 时会按容器宽高创建 canvas。维护的时候把入口指到 index.html 就行。

页面骨架

验证码容器如何布局
#v_container 定宽 200、高 50。GVerify 初始化时读 offsetWidth、offsetHeight，没有尺寸就退回 100×30。容器太小，字和干扰线会挤成一团，看不清。

输入框、按钮和画布横排。按钮用 padding: 10px 20px 撑开，不要写死宽高；可点区域加 cursor: pointer。画布本身在脚本里也设了手型，提示用户可以点刷新。

宽高按设计稿改。改完记得硬刷新，避免旧画布尺寸还在。

验证码如何生成与刷新

说白了就是在 canvas 上先铺底色，再画四个字符，最后加几条干扰线和一堆小点。字符从数字池、字母池或两者合并里随机抽。

type 三种：

1、blend：数字加字母（默认）

2、number：纯数字

3、letter：纯字母

只传容器 id 时按默认混合：new GVerify(“v_container”)。要改类型写成对象：

每个字符会随机字号、颜色、阴影，再绕自己中心转一个角度，看起来歪一点。干扰线四条，干扰点数量跟容器宽度挂钩。我第一次看也卡了一下：画字前 translate 到落点再 rotate，画完要转回去、坐标也移回去，不然下一笔全歪到画布外。

点画布会调 refresh，清空 code 重画一张。看不清就点一下换。

生成核心大致是这样：

位数写死 4 个。要 5 位或 6 位，改循环上限，并按宽度重新分一下 x。

输入内容如何校验

validate 把输入和当前 code 都转成小写再比。对了返回 true；错了先 refresh 换一张，再返回 false，避免同一张码被狂试。

页面上点验证时取输入框的值：

事件挂在 body 上用 on 委托。提示走 Layui 的 layer.msg，具体按实际项目来定。空着点验证会当错误，并换一张新码。

这坑我见过不止一次：前端比对只适合拦一下误操作和简单脚本。登录、发短信这种，答案不能只存在浏览器里，还要服务端再验一轮。

如何对接到真实项目中

把 css、js、lib 拷进项目，表单旁按下面这份接。登录提交前先 validate，通过了再调登录接口；接口里仍要带上服务端下发的验证码 token 或答案校验，不要只信前端返回的 true。

类型、容器宽高按产品要求改。纯数字验证码把 type 写成 number。

容器宽高在 css/verify.css 里改。gVerify.js 整份跟着项目走即可，一般不用改绘制细节。和登录接口对接时，验证通过后再提交账号密码；服务端校验失败同样提示，并让前端 refresh 换图。