前端做登录验证码功能的理解

前言

前端小白一名，记录日常学习生活点滴【第二周】

一、关于 前端做登录验证码功能的个人理解

做这个功能之前一定要搞清楚它的作用是什么：
【用它来确定正在访问网站的用户是人而不是一个程序】
原因：不管是何种验证码方式，都是要让程序难以判断，而让人好判断的原则设计的。

【防止用户利用机器人自动注册、登录、灌水】
原因：安全角度出发，随着网络速度的提高，如果没有一种防御机制的话，那么攻击者完全可以通过疯狂猜测尝试来获得用户的密码，还可以利用机器人自动注册、登录、灌水。想想多可怕。

一般来说，前端做登录验证就大概有几种类型吧【发验证码】【拖拽完成拼图】【随机生成字符】【输入计算结果】等等
个人的理解，纯前端的验证，没多大意思，有点自欺欺人，所以要配合后端一起验证才是最保险的。

其实这些都挺常见的，但是如果自己写，还是很费时间的，一般可以去网上找插件，这里推荐JQuery之家，很好用。

说说这次的具体需求吧： 用户觉得随机生成字符太low了，想玩个高大上的验证方式，所以我们初步定的就是【拖拽完成拼图】，这个功能对我这个菜鸡来说还是有点难度的，看了看插件的源码，相对有点复杂，前后端处理起来都不是那么友好，更要命的是，拖拽的对象和它的目标空缺都是不规则的图形，这就必须用到canvas画布来处理，果断放弃！哈哈。

然后和我的好师父商量了一下，果然有经验的程序大佬就是不一样，俺师父想了一个最简单，而且最适合前后端控制，最高大上的方法来实现验证：【九宫格验证】
即：一张大背景图，分别由9张小图拼接而成，随机生成一张倒放的图片，其余八张正常，用户只需要点击倒放的那张图片即可。
优点是：前后端都好控制，前端这边只需要实现一点交互功能比如用户选中的图片打个勾、而且点击确定按钮只需要传一个长度为9的字符串就可以了，比如倒放的是第二张图片，那么我只需要传010000000给后端就OK了，是不是很简单啊。

简单讲一下我的布局和JS的实现吧：

用的最简单的table来布局，CSS样式就不说了，反正慢慢调的问题，

<div class="box">
        <div class="lottery">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td></td>
                    <td></td>
                    <td