作者的话：
基于patternLock插件完成九宫格上岸校验功用。其亮点在于摒弃传统校验体式格局同时融会产物文明。同上一篇文章一样，本次完胜利用剥离至本人15年毕设项目《ReBook》。下面引见重要思绪，详情请戳背面源码链接。结果图：
左边：九宫格滑动地区，右边：上岸、提醒地区
依据提醒点击滑动，顺次衔接“借书图标”-“换书图标”-“购书图标”（以下简称“借换购”）即得结果：
开辟步骤：
1. 引入相干插件文件：
重要有patternLock.js/patternLock.css。另外，本例还运用到了bootstrap、jquery相干文件。2. 制造个性化的九宫格图：
本图将品牌REBOOK字母融入个中，同时包含了网站三大特征营业LOGO（借换购）。在此我只做了一张大图，在css中运用background-position定位。固然你也能够分解成9张小图来完成。3. 完成上岸窗口
form表单input完成之类的人人都邑，只是美与丑的差异，此处省略。4. 解锁道理
同传统随机数字校验体式格局雷同，我们在看到歪曲、隐约等名堂作死的数字（或字母、笔墨）后，钛合金双眼辨认胜利后输入对应数字即校验胜利。
同理，我们将patternLock九宫格的九个地区类比成1-9这九个数字，当你顺次点击滑动衔接1-5-9对应地区，则意味着获得的婚配字串即为“159”，再将其与随机天生的规范答案字串对照即得结果。
1 2 3
4 5 6
7 8 9
对应的代码以下：
// 准确答案串
var rightAnswer = "";
// 初始化九宫格
var lock = new PatternLock("#patternContainer");
lock.checkForPattern(rightAnswer,function(){
// 校验胜利，激活上岸按钮
$("#login").attr("disabled",false);
$("#login").removeClass("buttonDis");
//alert("考证胜利");
},function(){
lert("连错了，再试一次");
lock.reset();
});
此时，我们描写的只是一个裸着的patternLock，那待我们给九个娃娃穿上美丽的CSS图标以后是否是就功德圆满了呢？5. 火线高能
我们想象一次考证历程，假如本次背景天生的规范字串值为“589”。那末，我们须要给“5”娃穿上“借书图标”、“8”娃穿上“换书图标”、“9”娃穿上“购书图标”，其他娃娃们就随便穿了。由于关于用户们来讲，不管背景天生的标答是什么，他们的标答永远都是顺次衔接“借换购”就可以考证胜利。所以我们，在九宫格地区映照对应款式历程须要划分红两部份，一部份专属标答随机映照，一部份盈余部份的随便映照，完成每次用户进入看到的展现结果差别。
另外，另有个题目。假如真的太随机了关于用户在电脑上衔接确切会有肯定的难度，用户体验下落。因而本例做了小小的限定，将标答的发生局限从3X3减少到了2X2（即5689关于地区）。
