JavaScript+html制作简单验证码

JavaScript + HTML 制作简单验证码

在前端开发中，验证码是用来验证用户输入的一种重要手段。本文将介绍如何使用 JavaScript 和 HTML 制作一个简单的验证码。

验证码原理

验证码是一种人机交互的验证方式，通过向用户提供一张图片或者一段文字，要求用户在输入框中正确地输入验证码，从而确认用户的身份。常见的验证码类型包括数字、字母和图形等。

制作验证码的基本原理是生成随机的验证码内容，并将其展示给用户。用户在输入框中输入验证码后，再将其与生成的验证码内容进行比对，如果输入正确，则验证通过；否则需要重新输入。

制作流程

1. HTML 结构

首先，我们需要在 HTML 文件中创建一个画布和一个输入框，用于展示验证码内容和接收用户输入的内容。

--------- -----
------
------
    ------------------
    ------- ----------------------
-------
------
    --------------------
    ------- ---------------------
    ------ ----------- -----------
    ------- -----------------------------
-------
-------

在上面的代码中，我们引入了 app.js 文件，该文件用于生成验证码和验证用户输入。

2. JavaScript 代码

接下来，我们需要编写 JavaScript 代码来生成验证码和验证用户输入。具体步骤如下：

2.1 生成验证码

我们可以使用 Canvas API 来生成验证码。Canvas 是 HTML5 中新增的一个绘图标签，提供了强大的绘图功能。

--- ------ - ----------------------------------
--- --- - ------------------------

-- -- ------ --------
------------ - ----
------------- - ---
-------- - ----- ---- -------

-- ----------
--- ---- - ---
--- ----- - -----------------------------------------------------------------
--- ---- - - -- - - -- ---- -
    ---- -- ------------------------------------- - ---------------
-

-- -------
------------------ --- ----

-- ------- -------------- --------
------------------------------ ------

在上面的代码中，我们首先获取到画布和上下文对象，然后设置 canvas 的宽高和字体样式。接着，我们生成随机的验证码内容，并使用 fillText() 方法将其绘制到画布上。最后，我们将验证码保存到 sessionStorage 中，以便后续验证。

2.2 验证用户输入

当用户点击提交按钮时，我们需要验证用户输入是否正确。具体步骤如下：

-------- ------- -
    --- ----- - ---------------------------------------
    --- ---- - -------------------------------

    -- -------------------- --- ------------------- -
        ---------------
    - ---- -
        ----------------------
        ----------
    -
-

-------- --------- -
    --- ------ - ----------------------------------
    --- --- - ------------------------

    -- ----
    ---------------- -- ------------- ---------------

    -- -------
    --- ---- - ---
    --- ----- - -----------------------------------------------------------------
    --- ---- - - -- - - -- ---- -
        ---- -- ------------------------------------- - ---------------
    -

    -- -------
    ------------------ --- ----

    -- ------- -------------- --------
    ------------------------------ ------
-

在上面的代码中，我们首先获取用户输入和保存在 sessionStorage 中的验证码内容。然后，我们将两者转换为小写字母并进行比对。如果输入正确，则弹出提示框；否则需要重新输入，并且调用 refresh() 函数生成新的验证码。

示例代码

完

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/2013