Web登录页面+生成验证码检验（亲测有效，复制即用）

最新推荐文章于 2022-12-09 21:36:39 发布

RZ_J9pp

最新推荐文章于 2022-12-09 21:36:39 发布

阅读量2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/RZ_J9pp/article/details/90703629

JS 专栏收录该内容

5 篇文章

订阅专栏

前台HTML模板

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('globalconst.APP_NAME') }}</title>
    <link rel="stylesheet" href="{{ URL::asset('css/define/login.css') }}" type="text/css" />
    <link rel="stylesheet" href="{{ URL::asset('plugins/font-awesome/all.min.css') }}" type="text/css" />
    <script type="text/javascript" src="{{ URL::asset('plugins/font-awesome/all.min.js')}}"></script>
    <script type="text/javascript" src="{{ URL::asset('js/vendors/jquery/jquery-3.3.1.js')}}"></script>
    <script type="text/javascript" src="{{ URL::asset('js/define/login.js')}}"></script>
    <script type="text/javascript" src="{{ URL::asset('js/define/validation.js')}}"></script>

    <style>
        .title{
            font-size: 3.5em;
            font-weight: 900;
            letter-spacing: 4px;
            font-family: 楷体;
            color: #ffffff;
        }
        .text-center{
            text-align: center;
            color: white;
        }

    </style>
</head>

<body onload="createCode()">
<div class="body-shadow"></div>

<div>
    <div class="row" style="margin-left: 0;margin-right:0;margin-bottom: 40px;text-align: center;margin-top: 20px;">
        <img width="86px" height="120px" src="{{ URL::asset('imgs/logored.png') }}" alt="logo" height="60"/>
        <div class="col-md-12 text-center" style="margin-top: 30px;">
            <span class="title" style="color:black;"> {{ config('globalconst.APP_NAME') }}</span>
        </div>
    </div>
    <div class="login-container">
        <div class="container-body">
            <div class="login-panel">
                <div class="panel-title">
                    <span>用户登录</span>
                </div>

                <div class="panel-body">
                    <div class="panel-row">
                        <input type="hidden" id="login-url" value="{{ route('loginProcess') }}" />
                        <input type="text" name="username" id="username" placeholder="用户名" />
                        <span>
                        <i class="fas fa-user myicon"></i>
                    </span>
                    </div>
                    <div class="panel-row">
                        <input type="password" name="userpwd" id="userpwd" placeholder="密码" autocomplete="false" />
                        <span>
                         <i class="fas fa-lock myicon"></i>
                    </span>
                    </div>

                    <div class="panel-row">
                        <input type="text" placeholder="验证码" id="inputCode" style="width: 50%"/>
                        <span>
                                 <i class="fas fa-key myicon"></i>
                        </span>
                        <div id="validations">
                            <canvas id="canvas" width="88" height="24" ></canvas>
                            <a href="javascript:void(0)" style="margin-left: 10px" onclick="createCode()">看不清</a>
                        </div>
                    </div>

                    <div class="panel-row" style="margin-top: 20px">
                        <button type="button" class="login-btn">登&nbsp;&nbsp;录</button>
                    </div>
                </div>
                <div class="err-message">
                    <i class="fas fa-minus-circle erricon"></i>
                    <span class="err-content">用户名或密码错误，请稍后</span>
                </div>
                
            </div>
        </div>
    </div>
</div>



<footer>


    <span>{{ config('globalconst.APP_FOOTER') }}</span>
</footer>
</body>
</html>

生成验证码和检验验证码validation.js文件



var code;
function createCode() {
    code = "";
    var codeLength = 5; //验证码的长度
    var checkCode = document.getElementById("checkCode");

    var codeChars = new Array(2, 3, 4, 5, 6, 7, 8, 9,
        'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的
    for (var i = 0; i < codeLength; i++) {
        var charNum = Math.floor(Math.random() * 58);
        code += codeChars[charNum];
    }
    if (checkCode) {
        checkCode.className = "code";
        checkCode.innerHTML = code;
    }


    var canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = '16px sans-serif';
    context.fillStyle = '#4B4B4B';
    context.fillText(code, 12, 18);
}

function validateCode() {

    var inputCode = document.getElementById("inputCode").value;
    if (inputCode.length <= 0) {
        $(".err-content").text("请输入验证码");
        $(".err-message").css("visibility", "visible");
        return false;
    }
    else if (inputCode.toUpperCase() != code.toUpperCase()) {
        $(".err-content").text("验证码错误，请重新输入");
        $(".err-message").css("visibility", "visible");
        $("#inputCode").val("");
        $("#userpwd").val("");
        createCode();
        return false;
    }
    else {
        return true;
    }
}

登录检验login.js文件，ajax提交

$(document).ready(function() {

    $(".login-btn").click(function() {

        var username=$("#username").val();
        var userpwd=$("#userpwd").val();

        if(username==='' || userpwd===''){
            alert('用户名或密码不能为空!');
            createCode();
            return;
        }
         if(!validateCode())
         {
             return;
         }

        $(this).text("登录中……");

        $.ajax({
            url: $("#login-url").val(),
            type: "post",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: {
                "username": username,
                "userpwd": userpwd
            },
            success: function(result) {
                var res = result;
                if (res.status == 501) {
                    $(".err-content").text(res.msg);
                    $(".err-message").css("visibility", "visible");
                    createCode();
                    var t = setInterval(function() {
                        $(".err-message").css("visibility", "hidden");
                        clearInterval(t);
                    }, 2000);
                    $("#userpwd").val("");
                    $(".login-btn").text("登  录");
                } else {
                    location.href = res.data.url;
                }
            },
            error: function(errmess) {
                console.log(errmess);
            }
        });

    });

    $("body").on("keydown", function(e) {
        if (e.keyCode === 13) {
            $(".login-btn").click();
        }
    })

});