登录验证码

最新推荐文章于 2024-06-19 17:10:24 发布
最新推荐文章于 2024-06-19 17:10:24 发布
阅读量1k 收藏 1
点赞数
分类专栏： html 文章标签： html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74958046/article/details/127826617
版权

登录验证是一般系统都会有的功能，验证的方式也多种多样，比如输入式验证码，拖动式验证条，拖动式验证拼图等等。

我们这里先实现常规的输入验证码的方式，右边显示验证码图片，点击可刷新，左边输入验证码。如下图为实现的效果。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #code {
           color:#1E9FFF;
           font-weight: bold;
           font-style:oblique;
           letter-spacing:5px;
           font-size:20px;
           height: 2.8rem;
        }
        #input_code {
            width: 63%;
            background: #ffffff;
            height: 2.8rem;
            padding: 0 2%;
            border-radius: 5px;
            border: none;
            border: 1px solid rgba(0,0,0,.2);
            font-size: 0.9rem;
        }
   </style>
   
    <script>
        if(window!==top)
            top.location.replace(location.href);
    </script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/assets/libs/layui/css/layui.css"/>
{#    <link rel="stylesheet" href="{{ url_for('static',filename='plugin/layui/css/layui.css')}}"/>#}
{#    <link rel="stylesheet" href="{{ url_for('static',filename='css/admin.css') }}?v=318"/>#}
    <title>系统登陆</title>
    <style>
        body {
            background-image: url("{{ url_for('static',filename='images/bg-login2.jpg') }}");
            background-repeat: no-repeat;
            background-size: cover;
            min-height: 100vh;
        }

        body:before {
            content: "";
            background-color: rgba(0, 0, 0, .2);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .login-wrapper {
            max-width: 420px;
            padding: 20px;
            margin: 0 auto;
            position: relative;
            box-sizing: border-box;
            z-index: 2;
        }

        .login-wrapper > .layui-form {
            padding: 25px 30px;
            background-color: #fff;
            box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.19);
            box-sizing: border-box;
            border-radius: 4px;
        }

        .login-wrapper > .layui-form > h2 {
            color: #333;
            font-size: 18px;
            text-align: center;
            margin-bottom: 25px;
        }

        .login-wrapper > .layui-form > .layui-form-item {
            margin-bottom: 25px;
            position: relative;
        }

        .login-wrapper > .layui-form > .layui-form-item:last-child {
            margin-bottom: 0;
        }

        .login-wrapper > .layui-form > .layui-form-item > .layui-input {
            height: 46px;
            line-height: 46px;
            border-radius: 2px !important;
        }

        .login-wrapper .layui-input-icon-group > .layui-input {
            padding-left: 46px;
        }

        .login-wrapper .layui-input-icon-group > .layui-icon {
            width: 46px;
            height: 46px;
            line-height: 46px;
            font-size: 20px;
            color: #909399;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
        }

        .login-wrapper > .layui-form > .layui-form-item.login-captcha-group {
            padding-right: 135px;
        }

        .login-wrapper > .layui-form > .layui-form-item.login-captcha-group > .login-captcha {
            height: 46px;
            width: 120px;
            cursor: pointer;
            box-sizing: border-box;
            border: 1px solid #e6e6e6;
            border-radius: 2px !important;
            position: absolute;
            right: 0;
            top: 0;
        }

        .login-wrapper > .layui-form > .layui-form-item > .layui-form-checkbox {
            margin: 0 !important;
            padding-left: 25px;
        }

        .login-wrapper > .layui-form > .layui-form-item > .layui-form-checkbox > .layui-icon {
            width: 15px !important;
            height: 15px !important;
        }

        .login-wrapper > .layui-form .layui-btn-fluid {
            height: 48px;
            line-height: 48px;
            font-size: 16px;
            border-radius: 2px !important;
        }

        .login-wrapper > .layui-form > .layui-form-item.login-oauth-group > a > .layui-icon {
            font-size: 26px;
        }

        .login-copyright {
            color: #eee;
            padding-bottom: 20px;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        @media screen and (min-height: 550px) {
            .login-wrapper {
                margin: -250px auto 0;
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                width: 100%;
            }

            .login-copyright {
                position: absolute;
                bottom: 0;
                right: 0;
                left: 0;
            }
        }

        .layui-btn {
            background-color: #5FB878;
            border-color: #5FB878;
        }

        .layui-link {
            color: #5FB878 !important;
        }
    </style>
</head>
<body>
<div class="login-wrapper layui-anim layui-anim-scale layui-hide">
    <form class="layui-form">
        <h2>登陆</h2>
        <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-username"></i>
            <input class="layui-input" id="username" name="username" value="12345" placeholder="请输入登录账号" autocomplete="off"
                   lay-verType="tips" lay-verify="required" required/>
        </div>
        <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-password"></i>
            <input class="layui-input" id="pwd" name="pwd" value="12345" placeholder="请输入登录密码" type="password"
                   lay-verType="tips" lay-verify="required" required/>
        </div>

        <!-- <div style="width: 200px;display:flex;">
            <input type="text" name="captcha" placeholder="请输入验证码" maxlength="5" autocomplete="off"  id="input_code">
            <input type="button" id="code" onclick="createCode()" />
        </div>  -->
        <div class="layui-form-item layui-input-icon-group">
            <input type="text" placeholder="请输入验证码" maxlength="5" id="input_code">
            <input type="button" id="code" onclick="createCode()" />
        </div> 

        <div class="layui-form-item">
            <button class="layui-btn layui-bg-blue layui-btn-fluid " lay-filter="loginSubmit" lay-submit="">登录</button>
        </div>

    </form>
</div>
<!-- <div class="login-copyright">copyright © 2020 航天科工系统仿真（北京）有限公司 all rights reserved.</div> -->
<script src="/static/assets/libs/layui/layui.js"></script>
{#<script src="{{ url_for('static',filename='plugin/layui/layui.js') }}"></script>#}
{#<script src="{{ url_for('static',filename='js/common.js') }}?v=318"></script>#}
<script>
    //产生验证码
	 window.onload = function () {
		 createCode()
	 }
	 var code; //在全局定义验证码
	 function createCode() {
		 code = "";
		 var codeLength = 5; //验证码的长度
		 var checkCode = document.getElementById("code");
		 var random = 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 index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）
			 code += random[index]; //根据索引取得随机数加到code上
		 }
		 checkCode.value = code; //把code值赋给验证码
	 }

    layui.use(['layer','form'],function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form
        $('.login-wrapper').removeClass('layui-hide');


        //登陆事件
        form.on('submit(loginSubmit)',function(data){
            console.log('login click');
            // 设置按钮文字 禁止点击
            $(data.elem).attr('disabled',true).text('登陆中....');
            console.log(JSON.stringify(data.field));
            var inputCode = $('#input_code').val().toUpperCase(); //获取输入框内验证码并转化为大写
            if(inputCode!=code){
                layer.msg('验证码错误',{
                    icon:2,
                    anim:6
                });
                // 把按钮设置成初始可用的状态
                setTimeout(function(){
                    $(data.elem).text("登录").removeAttr("disabled");
                },1000);
            }else{
                // 网络请求
                var loadIndex = layer.load(2);
                $.ajax({
                    type:'post',
                    url:'/dologin',
                    data:JSON.stringify(data.field),
                    contentType:"application/json",
                    dataType:'json',
                    success:function(res){
                        console.log(res);
                        //关闭层
                        layer.close(loadIndex);
                        // 判断返回数据
                        if(res.code==0){
                            // 登录成功
                            $(data.elem).attr('disabled',true).text('登录成功');
                            // 使用layer的消息提示功能
                            layer.msg('登陆成功',{
                                icon:1,
                                time:1500
                            });
                            // 跳转到index页面
                            setTimeout(function(){
                                window.location.href = '/index';
                            },2000)
                        }else{
                            layer.msg(res.msg,{
                                icon:2,
                                anim:6
                            });
                            // 把按钮设置成初始可用的状态
                            setTimeout(function(){
                                $(data.elem).text("登录").removeAttr("disabled");
                            },1000);
                        }
                    },
                })
            }
            return false;
        })

    })
</script>
</body>
</html>

潮阿景
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
登录的验证码
新手上路的博客
03-01 2855
登录的验证码样板如下： 代码如下： 前端： @* ==============获取验证码=============== *@ <div class="form-group row" style="margin-right:-65px;"> <div class="col-sm-9 col-xl-10 pr-0"> <div class="inp
Java实现登录验证码的功能
沐雨橙风ιε的博客
09-16 6520
Java实现登录验证码的功能
验证码登录如何实现？
m0_63144319的博客
07-25 2780
为了方便用户登录，移动端通常都会提供通过手机验证码登录的功能。手机验证码登录的优点:登录流程：输入手机号>获取验证码>输入验证码>点击登录>登录成功通过手机验证码登录时，涉及的表为user表，即用户表。结构如下:在开发代码之前，需要梳理一下登录时前端页面和服务端的交互过程:开发手机验证码登录功能，其实就是在服务端编写代码去处理前端页面发送的这2次请求即可。在开发业务功能前，先将需要用到的类和接口基本结构创建好:工具类SMSutils（阿里云短信服务）： 工具类：ValidateCodeutils（生成验证码
系统登录使用验证码校验
最新发布
run__ning的博客
06-19 156
系统登录使用验证码校验
登录验证
weixin_45331546的博客
08-18 2243
登录验证理解：指的是进入一个页面或者是系统之前检验用户是否有权限进入 登录验证的步骤： ①　获取页面用户输入的数据，然后通过提交传递到控制器 ②　在控制器中对页面传过来的数据进行验证，检查数据数据是否为空，密码是否输入正 确，验证码输入正确等等 ③　验证的数据准确可以登录，否则不能登录 在登录验证中的查询我们用到了C#的Linq查询代码，而Linq查询： LINQ :语言集成查询（英语：Language Integrated Query，缩写：LINQ），发音"link"， 是微软的一项技术，新增一种自然查
验证码登录开发----手机验证码登录
秃头青年的学习记录博客
04-19 2337
前面我们已经完成了LoginCheckFilter过滤器的开发，此过滤器用于检查用户的登录状态。我们在进行手机验证码登录时，发送的请求需要在此过滤器处理时直接放行。开发手机验证码登录功能，其实就是在服务端编写代码去处理前端页面发送的这2次请求即可。为了方便用户登录，移动端通常都会提供通过手机验证码登录的功能。输入手机号>获取验证码>输入验证码>点击登录>登录成功。在开发业务功能前，先将需要用到的类和接口基本结构创建好。注意：通过手机验证码登录，手机号是区分不同用户的标识。业务层接口UserService。
SSM实现登录验证码功能
08-14
在这个“SSM实现登录验证码功能”的项目中，我们将探讨如何在SSM框架下添加验证码功能，以增强用户登录的安全性。 首先，验证码功能的基本目的是防止恶意自动化程序（如机器人或爬虫）进行非法操作，如频繁尝试登录...
SSM 实现登录验证码功能（附源码）
08-26
SSM 实现登录验证码功能 本文主要介绍了使用 SSM 框架实现登录验证码功能的方法，通过实例代码详细介绍了验证码的实现过程，具有很高的参考价值。 验证码的重要性 验证码是一种常用的安全机制，用于防止机器人和...
常见的登录验证方式
qq_43359234的博客
02-02 1435
这种方式能够节省传输时占用的连接资源，但同时也存在一个问题：每次请求都是独立的，服务器没法判断本次请求和上一次请求是否来自同一个用户，进而也没法判断用户的登录状态。单点登录指在公司内部搭建的一个公共认证中心，公司下的全部产品登录均可以在认证中心完成，一个产品在认证中心登录之后，再去访问另外一个产品，能够不用再次登录，便获取登录状态。登录是每个网站中常常用到的功能，在页面上输入自己的账号密码，敲一下回车键，即可完成登录，但是其中背后的登录原理值得深入探究，今天就来介绍几种常用的登录方式。
登录和注册页面 - 验证码功能的实现
xaiobit_hl的博客
07-24 5084
登录和注册页面 - 验证码功能的实现
SpringBoot+Vue3实现登录验证码功能
心态的博客
04-27 4664
登录页面都会有输入用户名、密码和验证码而判断用户是否登录成功做出响应的操作。输入用户名和密码提交表单做登录验证这个相信看到这篇文章的小伙伴们都是小问题（熟练地不能在熟练了）。但这个验证码用户点击刷新验证码，用户填写后才能正常登录。随机生成图片验证码就会有些疑惑，不知道该怎么做。 这篇文章我们就来重点看如何生成验证码，前端如何展示，如何点击验证码后会换张图片（就是常见到的“看不清？换一张图”）这一功能。
史上最简便的可以直接用的登录验证码攻略（前后端都有）
qq_52357485的博客
07-09 2396
史上最好用的可以直接复制粘贴的验证码实现攻略
JavaWeb——登录界面验证码生成(详细操作)
nine06的博客
11-02 7918
验证码是“全自动区分计算机和人类的公证测试”（Completely Automated Public Turing test to tell Computers and Humans Apart）的缩写。它是一种用于识别用户是否为真实人类的技术。验证码通常包括一个随机生成的字符串，用户需要在输入框中输入正确的字符串以证明他们不是机器人。
springboot登录验证
qq_67124455的博客
05-06 4891
springboot登录校验
Web应用登录验证的几种方式
Zero摄氏度的博客
08-25 4542
1、HTTP 是无状态的，为了维持前后请求，需要前端存储标记-----cookie 2、cookie 是一种完善的标记方式，通过 HTTP 头或 js 操作，有对应的安全策略，是大多数状态管理方案的基石 3、session 是一种状态管理方案，前端通过 cookie 存储 id，后端存储数据，但后端要处理分布式问题 4、token 是另一种状态管理方案，token 的编码技术，通常基于 base64，或增加加密算法防篡改；jwt 是一种成熟的编码方案，并且JWT实现了无状态登录，相较于传统的有状态登录
登录验证的那些事儿
空空说技术的博客
06-28 2564
Cookie、Session、Token、JWT 看一篇就够了 近些年来，关于身份验证的安全越来越受到重视，基本上现在开发的系统，都要做一些身份验证。在以前的项目我们一般使用session或者cookie来存储已登录的用户信息，这样到达一个免除重复登录的问题。 总而言之，后端实际上就是在做一个事情，验证你是谁？在这个验证的过程中，就涉及到一些认证，授权，凭证等过程。 字多你就挑有颜色的看啊!!!\color{#376956}{字多你就挑有颜色的看啊!!!}字多你就挑有颜色的看啊!!! 什么是认证（Auth
django登录验证码
05-13
要在 Django 中实现登录验证码功能，可以按照以下步骤进行： 1. 安装验证码库 可以使用诸如 Pillow、captcha 等第三方库实现验证码功能。可以使用 pip 安装： ``` pip install Pillow pip install captcha ``` 2. 生成验证码 可以在视图函数中生成验证码并将其保存到 session 中。以下是一个生成验证码并将其保存到 session 的示例代码： ```python from django.shortcuts import render from django.http import HttpResponse from django.contrib.auth import authenticate, login from captcha.image import ImageCaptcha def login_view(request): if request.method == 'POST': username = request.POST.get('username') password = request.POST.get('password') captcha = request.POST.get('captcha') if captcha == request.session.get('captcha'): user = authenticate(request, username=username, password=password) if user is not None: login(request, user) return HttpResponse('登录成功') else: return HttpResponse('用户名或密码错误') else: return HttpResponse('验证码错误') else: image = ImageCaptcha() captcha = image.generate() request.session['captcha'] = captcha return render(request, 'login.html', {'captcha': captcha}) ``` 3. 在模板中显示验证码 在模板中，可以使用下面的代码显示验证码： ```html <img src="{{ captcha.url }}" alt="captcha"> <input type="text" name="captcha" required> ``` 其中，`{{ captcha.url }}` 变量用于显示验证码图片的 URL，`<input>` 标签用于用户输入验证码。 以上就是 Django 实现登录验证码的基本步骤。需要注意的是，为了保证验证码的安全性，应该使用 HTTPS 协议传输验证码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值