登录验证码

最新推荐文章于 2024-04-15 10:32:37 发布

潮阿景

最新推荐文章于 2024-04-15 10:32:37 发布

阅读量1k

点赞数

分类专栏： html 文章标签： html5 前端

本文链接：https://blog.csdn.net/m0_74958046/article/details/127826617

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

<!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
评论
登录验证码

登录验证是一般系统都会有的功能，验证的方式也多种多样，比如输入式验证码，拖动式验证条，拖动式验证拼图等等。我们这里先实现常规的输入验证码的方式，右边显示验证码图片，点击可刷新，左边输入验证码。如下图为实现的效果。
复制链接

扫一扫