前端设计- JavaScript验证码制作及实例分析

网页设计中，尤其表单填写提交过程中，为防止机器自动登录，很多网页都采用验证码技术，允许用户输入而尽量避免自动登录。验证码实现的方法有很多，PHP绘图技术可以在服务端生成验证码并发送客户端，HTML5技术下可以使用canvas与JS脚本实现在客户端浏览器自动生成验证码。本文给出JS+Canvas验证码的解决措施，所制作验证码实现效果如下图所示：

验证码实现效果动态图

实现原理

本例验证码的实现主要包括验证码字符串的生成、背景干扰点实现及干扰直线的生成三部分。最终通过canvas绘图技术将生成的验证码字符串、背景及干扰直线显示到画布上。主要涉及技术或知识点包括canvas绘图技术、数组、鼠标点击事件、随机函数等。以下从验证字符串、背景干扰点及干扰直线三方面对实现过程进行说明。

验证字符串

验证字符串部分主要借助数组存储验证码所有字符，通过调用Math对象的随机函数获取数组下标，并通过数组下表读取数组元素，将读取的数组元素组装成完整字符串。其实现核心代码如下：

验证字符串获取核心代码

如上图所示，本例验证码字符包括数字与大写字母，getCode函数返回值即为4位验证码字符串。

背景干扰点

背景干扰点可以直接使用canvas对应的绘图方法进行绘制，本例为简化开发过程，降低难度直接使用drawImage绘图方式加载背景图片，实现干扰点效果。背景图片如下：

背景干扰点图片

通过调用drawImage方法，指定截取的坐标位置参数，可实现背景干扰点的动态变化效果，背景干扰点实现核心代码如下：

背景干扰点实现代码

其中getXsize与getYsize为获取绘图截取背景图片的坐标位置，通过使用随机函数实现从背景图片不同位置截取进行绘图输出。

干扰直线

干扰直线实现较为简单，直接通过JS提供的moveTo与lineTo方法完成直线的绘制，本例绘制了两条直线，一条为黑色干扰线，一条为白色干扰线。在绘制过程两端点需要使用Math随机函数生成符合条件随机坐标。干扰直线相关实现代码如下：

干扰直线实现核心代码

干扰直线实现核心代码如上图，其中getLsize方法主要用于获取随机端点Y轴坐标值。strokeStyle主要用于设置绘图直线的颜色。

验证码显示输出

验证码的显示输出主要使用fillText()方法在canvas指定位置进行文字输出，本例使用第三方ttf字体，因此在HTML页面中对字体进行了加载。验证码显示输出实现代码如下：

验证码绘制

验证码显示输出核心代码如上图所示，其中myfont为加载的第三方字体。

绘图基础部分

绘图基础部分主要包括前端canvas元素的布局等。包括属性的设置，js部分元素的获取及属性设置等。

其他工作

我们一般接触的验证码，都可以点击图片实现验证码的刷新，因此本例为canvas标记添加了onclick事件，将所有验证码生成的代码封装到showCode()函数中，通过调用showCode函数实现验证码的刷新。本例完整JS脚本部分代码如下：

JS实现脚本代码

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可以联系作者，共同探讨。期待大家关注！如需案例完整代码请关注并私信，往期前端设计文章链接如下：

前端设计-Ajax技术及实例展示
前端设计-响应式页面开发基础
Web开发前端、后端与全栈的区别是什么？

网页页面的使用中为防止“非人类”的大量操作和防止一些的信息冗余，增加验证码校验是许多网站常用的方式。

而让用户输入字母和数字组合的验证码是最经典也是最常用的方式。
这一篇是纯利用现有JDK提供的绘图类(ImageIO)类制作,这个过程比较复杂且需要了解ImageIO类。

今天发布的第二篇文章是利用Hutool工具类来实现的，该工具类已经封装验证码所需的相关类等，使用起来较为简单和方便。

验证码的生成和校验过程均使用Servlet和JSP的结合来实现，Servlet的相关内容可以参阅

Servlet技术:https://mp.weixin.qq.com/s/__e_ef0SI6kVPiRaU0MXJw

如何利用基础的JSP知识来实现网页的验证码校验呢？

验证码校验分析

首先要验证码的校验的过程。

验证码校验分为三部分：

生成验证码
获取用户输入的验证码
判断验证码是否输入正确

验证码的生成实际就是输出一个图像，所以在这里使用ImageIO来生成图片，然后结合使用随机数（Random）来实现随机生成验证上的内容，最后进而展示出来，然后利用Session对象存储验证码的内容。在用户输入验证码的时候可以用request来获取用户输入的内容，让其余Session对象中保存的验证码内容进行比较，若一致则验证成功，不一致就验证失败。

生成验证码

先创建一个图片的缓冲区：

BufferedImage bi=new BufferedImage(68, 22,BufferedImage.TYPE_INT_RGB);

创建画布：

Graphics g=bi.getGraphics();

创建颜色：

Color c=new Color(200,150,255);

创建背景颜色：

g.setColor(c);

填充矩形：

g.fillRect(0, 0, 68,22);

将要显示的验证码内容组成元素存入字符串数组：

char[] ch="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();

创建随机的验证码内容：

Random r=new Random();
         int len=ch.length;
         int index; //index用于存放随机数字
         StringBuffer sb=new StringBuffer();
         for(int i=0;i<4;i++)
         {
             index=r.nextInt(len);//产生随机数字
             g.setColor(new Color(r.nextInt(88),r.nextInt(188),r.nextInt(255)));  //设置颜色
             g.drawString(ch[index]+"",(i*15)+3, 18);//画数字以及数字的位置
             sb.append(ch[index]);
         }

将验证码的内容存入Session及显示在页面上：

 request.getSession().setAttribute("piccode",sb.toString()); 
 ImageIO.write(bi, "JPG", response.getOutputStream());

完整代码：

public class ImageServlet  extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        BufferedImage bi = new BufferedImage(68, 22, BufferedImage.TYPE_INT_RGB);//创建图像缓冲区
        Graphics g = bi.getGraphics(); //通过缓冲区创建一个画布
        Color c = new Color(200, 150, 255); //创建颜色
        g.setColor(c);//为画布创建背景颜色
        g.fillRect(0, 0, 68, 22); //填充矩形
        char[] ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();//转化为字符型的数组
        Random r = new Random();
        int len = ch.length;
        int index; //index用于存放随机数字
        StringBuffer sb = new StringBuffer();
        for (int i = 0; i < 4; i++) {
            index = r.nextInt(len);//产生随机数字
            g.setColor(new Color(r.nextInt(88), r.nextInt(188), r.nextInt(255)));  //设置颜色
            g.drawString(ch[index] + "", (i * 15) + 3, 18);//画数字以及数字的位置
            sb.append(ch[index]);
        }
        request.getSession().setAttribute("piccode", sb.toString());
        ImageIO.write(bi, "JPG", response.getOutputStream());
    }
}

测试验证码

在测试之前需要先在web.xml文件中配置一下：

<servlet>
        <servlet-name>ImageServlet</servlet-name>
        <servlet-class>com.kailong.servlet.ImageServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>ImageServlet</servlet-name>
        <url-pattern>/imageServlet</url-pattern>
    </servlet-mapping>

启动服务器后在浏览器中输入http://localhost:8080/工程名/imageServlet 即可

验证码的生成已经实现成功，下面实现验证验证码的Servlet。

校验验证码

先新建一个jsp用户界面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录界面</title>
</head>
<body>
<form action="<%= request.getContextPath()%>/loginServlet" method="get" >
    验证码:<input  type="text" name="checkCode"/><br/>
    <img alt="验证码" id="imagecode" src="<%= request.getContextPath()%>/imageServlet"/>
    <input type="submit" value="提交">
</form>
</body>
</html>

校验验证码过程：

将生成的验证码内容保存在Session对象中
获取用户输入的验证码内容
将两个内容进行对照

代码实现：

获取Session中的验证码内容：

String piccode=(String) request.getSession().getAttribute("piccode");

获取用户输入的验证码内容：

String checkCode=request.getParameter("checkCode");

验证码判断（使用了PrintWriter将相关内容输出）

response.setContentType("text/html;charset=utf-8");//解决乱码问题
PrintWriter out=response.getWriter();
if(checkCode.equals(piccode))
{
    out.println("验证码输入正确！");
}
else
{
    out.println("验证码输入错误！！！");
}
out.flush();//将流刷新
out.close();//将流关闭

完整代码：

public class LoginServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException
    //用于验证验证码
    {
        String piccode = (String) request.getSession().getAttribute("piccode");
        String checkCode = request.getParameter("checkCode");
        response.setContentType("text/html;charset=utf-8");//解决乱码问题
        PrintWriter out = response.getWriter();
        if (checkCode.equals(piccode)) {
            out.println("验证码输入正确！");
        } else {
            out.println("验证码输入错误！！！");
        }
        out.flush();//将流刷新
        out.close();//将流关闭
    }
}

测试验证码校验

测试前先在web.xml文件中配置一下：

 <servlet>
        <servlet-name>LoginServlet</servlet-name>
        <servlet-class>com.kailong.servlet.LoginServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>LoginServlet</servlet-name>
        <url-pattern>/loginServlet</url-pattern>
    </servlet-mapping>

添加验证码刷新

在验证码生成之后，用户在识别的时候可能不能正确识别，这时候就需要刷新一下重新生成。

添加超链接实现刷新：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录界面</title>
    <script>
        function reloadCode() {
          var time=new Date().getTime();
          document.getElementById("imagecode").src="<%= request.getContextPath()%>/imageGenerate?d="+time;
        }
    </script>
</head>
<body>
<form action="<%= request.getContextPath()%>/loginServlet" method="get" >
    验证码:<input  type="text" name="checkCode"/><br/>
    <img alt="验证码" id="imagecode" src="<%= request.getContextPath()%>/imageServlet"/>
    <a href="javascript：reloadCode();">看不清楚</a><br>
    <br/><input type="submit" value="提交">
</form>
</body>
</html>

js部分的Date相关是防止浏览器缓存后不能正常刷新，添加时间的唯一性来实现能够及时刷新和展示。

js 部分可以参阅：JavaScript 语言入门: https://mp.weixin.qq.com/s/37CaC25_1agb-aXBLhUKtg

也可以在ImageServlet中添加防止浏览器缓存的语句：

response.setHeader("Pragma", "No-cache");

公众号本文地址：https://mp.weixin.qq.com/s/XHucabQ_WwUx2OMDGSTMkw

欢迎关注公众号：愚生浅末。

近有小伙伴提问：能否说下web验证的原理，感觉文字描述不清楚，于是就用代码简单的演示下：此代码是需要依赖：

sanic==19.9.0Pillow==7.0.0

import random
import string
import uuid
import base64
import platform
from PIL import Image, ImageDraw,ImageFont
from io import BytesIO
from sanic import Sanic
from sanic.response import HTTPResponse,text
from sanic.views import HTTPMethodView


app = Sanic()

session = {}


class VerifyCode:
    def __init__(self, numbers:int):
        """
        指定:生成的数量
        """
        self.number = numbers

    def draw_lines(self, draw, num, width, height):
        """划线"""

        x1 = random.randint(0, width / 2)
        y1 = random.randint(0, height / 2)
        x2 = random.randint(0, width)
        y2 = random.randint(height / 2, height)
        draw.line(((x1, y1), (x2, y2)), fill='black', width=1)

    def random_color(self):
        """随机颜色"""
        return (random.randint(32, 127), random.randint(32, 127), random.randint(32, 127))

    def gene_text(self):
        """生成验证码"""
        return "".join(random.sample(string.ascii_letters+string.digits, self.number))

    def get_verify_code(self):
        """
        draw.text()：
            文字的绘制，第一个参数指定绘制的起始点（文本的左上角所在位置），第二个参数指定文本内容，第三个参数指定文本的颜色，第四个参数指定字体（通过ImageFont类来定义）
        """
        code = self.gene_text()
        width, height = 130, 30
        im = Image.new("RGB", (width, height), "white")
        # 这里指定字体的路径
        sysstr = platform.system()
        font = None
        if sysstr == "Windows":
            font = ImageFont.truetype("C:\WINDOWS\Fonts\STXINGKA.TTF", 25)
        elif sysstr == "Darwin":
            font = ImageFont.truetype('/Library/Fonts/AppleMyungjo.ttf', 25)
        draw = ImageDraw.Draw(im)
        for item in range(self.number):
            draw.text((5+random.randint(-5,5)+23*item, 5+random.randint(-5, 5)), text=code[item],
                      fill=self.random_color(), font=font)
            self.draw_lines(draw, self.number, width, height)
        return im, code


class SimpleView(HTTPMethodView):
    body = """
        <html>
            <head>
                <meta charset="UTF-8">
                    <title>登录</title>
                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
                    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
                    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
                    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
            </head>
            <body>
                <form class="form-inline" method="post" action="/code">
                    <div>
                        <div class="form-group">
                            {error}                               
                          </div>
                        <div class="form-group">
                                <label for="exampleInputName2">验证码</label>
                                <input type="text" class="form-control" id="captcha" name="code">
                        </div>
                        
                        <div class="form-group">
                            <img src="data:image/jpeg;base64,{base64_data}" class="img-img-rounded">
                        </div>
                        <div>
                            <button type="submit">验证</button>
                        </div>
                    </div>
                </form>
            </body>
        </html>
        """

    async def get(self, request):
        return self.response(error="")

    async def post(self, request):
        uuid = request.cookies.get("uuid", "1")
        verfy_code = request.form.get("code", "2").lower()
        code = session.get(uuid, "").lower()
        if code == verfy_code:
            return text('验证码正确')
        return self.response(error='<input class="form-control" id="disabledInput" type="text" placeholder="验证码错误" disabled>')

    def response(self, error):
        im, code = VerifyCode(5).get_verify_code()
        buf = BytesIO()
        im.save(buf, "jpeg")
        buf_str = buf.getvalue()
        base64_data = base64.b64encode(buf_str).decode()
        id = uuid.uuid1().__str__()
        session[id] = code
        body = self.body.format(base64_data=base64_data, error=error)
        response = HTTPResponse(body, content_type="text/html; charset=utf-8")
        response.cookies["uuid"] = id
        return response


app.add_route(SimpleView.as_view(), '/code')

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=8000)

只是简单的实现了验证码，没有实现点击刷新，点击刷新的原理不难：异步请求+刷新接口就好了，记得更新对应的session的key里面的value

0人点赞

随笔

在线咨询

上一篇：前端零基础入门-步骤一：页面结构层HTML-01-HTML基础
下一篇：10行JavaScript代码完成图片的上传预览

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商