在前端开发中，验证码是用来验证用户输入的一种重要手段。本文将介绍如何使用 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