本文主要实现使用layui实现登录页面的验证码的生成和验证，全部前端完成，无需后端参与，上代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link href="//unpkg.com/layui@2.8.18-rc.2/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<style>
  .demo-login-container{width: 320px; margin: 21px auto 0;}
   #canvas {
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
  }
</style>
<form class="layui-form">
  <div class="demo-login-container">
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-row">
        <div class="layui-col-xs7">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-vercode"></i>
            </div>
            <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
          </div>
        </div>
        <div class="layui-col-xs5">
          <div style="margin-left: 16px;">
            <canvas id="canvas" width="100" height="36"></canvas>
              </div>
        </div>
      </div>
    </div>

    <div class="layui-form-item">
      <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
    </div>
    <div class="layui-form-item ">
      <a href="#reg">注册帐号</a>
    </div>
  </div>
</form>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.8.18-rc.2/dist/layui.js"></script>
<script>
<!--  自定义验证码生成模块-->
  layui.define(function(e) {
    var a = layui.jquery;
    var obj={
      randomColor:function() {//得到随机的颜色值
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
      },
      draw:function(show_num) {
        var canvas_width=a('#canvas').width();
        var canvas_height=a('#canvas').height();
        var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
        var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
        canvas.width = canvas_width;
        canvas.height = canvas_height;
        var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        var aCode = sCode.split(",");
        var aLength = aCode.length;//获取到数组的长度

        for (var i = 0; i <= 3; i++) {
          var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
          var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
          var txt = aCode[j];//得到随机的一个内容
          show_num[i] = txt.toLowerCase();
          var x = 10 + i * 20;//文字在canvas上的x坐标
          var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
          context.font = "bold 23px 微软雅黑";

          context.translate(x, y);
          context.rotate(deg);

          context.fillStyle = obj.randomColor();
          context.fillText(txt, 0, 0);

          context.rotate(-deg);
          context.translate(-x, -y);
        }
        for (var i = 0; i <= 5; i++) { //验证码上显示线条
          context.strokeStyle = obj.randomColor();
          context.beginPath();
          context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
          context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
          context.stroke();
        }
        for (var i = 0; i <= 30; i++) { //验证码上显示小点
          context.strokeStyle = obj.randomColor();
          context.beginPath();
          var x = Math.random() * canvas_width;
          var y = Math.random() * canvas_height;
          context.moveTo(x, y);
          context.lineTo(x + 1, y + 1);
          context.stroke();
        }
      },
    };
    e("captcha", obj);
  });

  layui.use(['captcha'],function(){
    var form = layui.form;
    var layer = layui.layer;
    var $ = layui.jquery;
    var capcha = layui.captcha;

    var show_num = [];
    capcha.draw(show_num);
    //显示验证码
    $("#canvas").on('click',function(){
      capcha.draw(show_num);
    });
    // 提交事件
    form.on('submit(demo-login)', function(data){
      var field = data.field; // 获取表单字段值
      var code = field["captcha"];
      if (show_num.join("")!=code){
        layer.msg('验证码错误,请重新输入', {
          offset: '15px'
          ,icon: 5
        });
        return false; // 阻止默认 form 跳转
      }
      // 显示填写结果，仅作演示用
      layer.alert(JSON.stringify(field), {
        title: '验证码正确，这是当前填写的字段值'
      });
       return false; // 阻止默认 form 跳转
    });
  });

</script>

</body>
</html>

效果图如下
在这里插入图片描述
验证通过如下
在这里插入图片描述
验证不通过如下
在这里插入图片描述
好了，到这里就结束了，希望可以帮助到有需要的小伙伴！！！

# layui # 前端 # javascript
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

Kubernetes CoreDNS 解析超时排查（ndots 与 NodeLocal DNSCache）

CoreDNS 超时先用 ClusterIP 直连排除数据面，再读 Pod的ndots 与 search。默认 ndots:5 让短名查询放大数倍，AAAA 再乘一倍。指标上区分 NXDOMAIN 瀑布和真正的 SERVFAIL/p99。NodeLocal DNSCache 降 RTT、不消灭放大；根上仍是 FQDN 或谨慎的 dnsConfig。改 DNS 全局配置必须可回滚，禁止先停 Core

avatar 2048 AI社区
cover

AIGC课程为什么从99元到数万元都有：先把“买工具”与“买结果”分开

avatar 2048 AI社区

AI视频总结工具有哪些？2026年5款热门工具横向评测

本文从客观角度介绍5款常见的AI视频总结工具：Ai好记、NoteAi、BibiGPT、通义听悟、NotebookLM。每款工具按同一套维度说明：支持的内容来源、转写与总结能力、操作方式、页面呈现，以及适用场景。文末附功能对比表和常见问题，供读者按需选择。

avatar 2048 AI社区