原生JavaScript实现数字加字母验证码的简单示例

季宁

发布时间：2026-10-14| 6人浏览过

原创

本文介绍如何使用原生JavaScript生成由数字和字母组成的随机验证码，并通过简单的DOM操作与输入框进行值对比验证，实现基础的前端身份校验逻辑。

准备环境

本示例仅依赖浏览器原生能力，无需引入任何第三方库或框架。你需要一个基础的HTML5结构即可运行。

核心代码实现

实现过程主要包含两个部分：验证码的生成与验证函数的编写。我们将通过 <script> 标签嵌入 JavaScript 代码，并结合 CSS 控制样式。

第1步：定义验证码生成逻辑

目的：创建一个函数用于生成指定长度的随机字符串（含数字0-9和英文字母）。

关键参数：

codeLength: 验证码长度，示例设为4。
selectChar: 候选字符数组，包含 0-9 及 a-z。

// 全局变量保存当前生成的验证码
var code;

function createCode() {
    // 清空并重置验证码变量
    code = "";
    var codeLength = 4; // 设置验证码长度
    var checkCode = document.getElementById("checkCode");
    
    // 定义所有候选组成验证码的字符（数字+小写字母）
    var selectChar = new Array(
        0,1,2,3,4,5,6,7,8,9,
        'a','b','c','d','e','f','g','h','i','j',
        'k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'
    );

    // 循环选取字符组成验证码
    for(var i = 0; i < codeLength; i++) {
        // 随机生成索引
        var charIndex = Math.floor(Math.random() * 36);
        code += selectChar[charIndex];
    }

    // 将生成的验证码赋值给显示控件
    if(checkCode) {
        checkCode.className = "code";
        checkCode.value = code;
    }
}

第2步：编写验证函数

目的：获取用户输入的值，并与全局变量 code 进行比对。

function validate() {
    var inputCode = document.getElementById("input1").value;
    
    // 判断输入是否为空
    if(inputCode.length <= 0) {
        alert("请输入验证码！");
    } else if(inputCode != code) {
        // 验证码错误时提示并刷新
        alert("验证码输入错误！");
        createCode();
    } else {
        // 验证码正确
        alert("验证成功");
    }
}

第3步：构建HTML界面

入口：body标签内添加表单。

动作：创建两个输入框，分别用于显示验证码和接收用户输入。注意显示框设置为只读（readonly）以防止直接修改。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JS验证码</title>
    <style type="text/css">
        .code {
            background-image: url('code.jpg'); /* 可选背景图 */
            font-family: Arial;
            font-style: italic;
            color: Red;
            border: 0;
            padding: 2px 3px;
            letter-spacing: 3px;
            font-weight: bolder;
        }
        .unchanged {
            border: 0;
        }
    </style>
    <!-- 此处插入上述JS代码 -->
</head>
<body onload="createCode()">
    <form action="#">
        <!-- 用户输入验证码 -->
        <input type="text" id="input1" placeholder="请输入验证码" />
        <br />
        <br />
        <!-- 显示验证码（点击可刷新） -->
        <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px" />
        <br />
        <br />
        <!-- 提交按钮 -->
        <input id="Button1" onclick="validate();" type="button" value="确定" />
    </form>
</body>
</html>