Implementing login page based on layui

This article example shares the specific code of layui to implement the login page for your reference. The specific content is as follows

First, let’s take a look at the renderings!

html、js

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <script src="./js/res_js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="./js/layui/css/layui.css" >
    <link rel="stylesheet" href="./css/adminLogin.css" >
</head>
<body>
    <div class="wrap">
        <img src="images/back.jpg" class="imgStyle">
        <div class="loginForm">
            <form>
                <div class="logoHead">
                    <!--<h2 style="margin-top: 15px">Real Estate Sales Platform Management System</h2>-->
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>Username:</label>
                    </div>
                    <div class="usernameDiv">
                        <i class="layui-icon layui-icon-username adminIcon"></i>
                        <input id="loginUsername" class="layui-input adminInput" type="text" name="username" placeholder="Enter username" >
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>Password:</label>
                    </div>
                    <div class="passwordDiv">
                        <i class="layui-icon layui-icon-password adminIcon"></i>
                        <input id="loginPassword" class="layui-input adminInput" type="password" name="password" placeholder="Enter password">
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>Verification code:</label>
                    </div>
                    <div class="cardDiv">
                        <input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="Enter verification code">
                    </div>
                    <div class="codeDiv">
                        <input id="loginCode" class="layui-input codeInput" type="button">
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="submitLabel">
                        <label>No account? <a href="#" id="loginRegister">Click to register</a></label>
                    </div>
                    <div class="submitDiv">
                        <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="Login"></input>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="./js/layui/layui.js" type="text/javascript"></script>
    <script>
        layui.use(['layer'],function () {
            var layer = layui.layer;
        })
        $(function () {
            // Page initialization generates verification code window.onload = createCode('#loginCode');
            // Verification code switch $('#loginCode').click(function () {
                createCode('#loginCode');
            });
            // Login event $('#loginBtn').click(function () {
                login();
            });
            //Registration event $('#loginRegister').click(function () {
                register();
            });
        });
        // Generate verification code function createCode(codeID) {
            var code = "";
            //Verification code length var codeLength = 4;
            //Verification code dom element var checkCode = $(codeID);
            // Verification code random number var random = [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++){
                // Random number index var index = Math.floor(Math.random()*36);
                code += random[index];
            }
            // Assign the generated random verification code to checkCode.val(code);
        }
        // Verify verification code, username, password function validateCode(inputID,codeID) {
            var inputCode = $(inputID).val().toUpperCase();
            var cardCode = $(codeID).val();
            var loginUsername = $('#loginUsername').val();
            var loginPassword = $('#loginPassword').val();
            if ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
                layer.alert("Username cannot be empty");
                return false;
            }
            if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
                layer.alert("Password cannot be empty");
                return false;
            }
            if (inputCode.length<=0){
                layer.alert("Verification code cannot be empty");
                return false;
            }
            if (inputCode != cardCode){
                layer.alert("Please enter the correct verification code");
                return false;
            }
            return true;
        }
        // Login process function login() {
            if (!validateCode('#loginCard','#loginCode')){
                //Block prompt}else {
                var loginUsername = $('#loginUsername').val();
                var loginPassword = $('#loginPassword').val();
                var params = {};
                params.loginUsername = loginUsername;
                params.loginPassword = loginPassword;
                var loginLoadIndex = layer.load(2);
                $('#loginBtn').val("Logging in...");
                $.ajax({
                    type:'post',
                    url:window.location.protocol+'//'+window.location.host+'/security-web/login.do',
                    dataType:'html',
                    data:JSON.stringify(params),
                    contentType:'application/json',
                    success:function (data) {
                        layer.close(loginLoadIndex);
                        var jsonData = JSON.parse(data);
                        if (jsonData.code == '999'){
                            window.location.href = './static/templates/main.html';
                        }
                    },
                    error:function () {
                        layer.close(loginLoadIndex);
                        $('#loginBtn').val("Login");
                    }
                });
            }

        }
        //Registration process function register() {
            layer.open({
                type:'1',
                content:$('.registerPage'),
                title:'Registration',
                area:['430px','400px'],
                btn:['Register', 'Reset', 'Cancel'],
                closeBtn:'1',
                btn1:function (index,layero) {
                    //Register callback layer.close(index);
                    var registerUsername = $('#registerUsername').val();
                    var registerPassword = $('#registerPassword').val();
                    var registerWellPassword = $('#registerWellPassword').val();
                    var selectValue = $('#roleSelect option:selected').val();
                    var params = {};
                    params.registerUsername = registerUsername;
                    params.registerPassword = registerPassword;
                    params.registerWellPassword = registerWellPassword;
                    params.selectValue = selectValue;
                    var registerLoadIndex = layer.load(2);
                    $.ajax({
                        type:'post',
                        url:window.location.protocol+'//'+window.location.host+'/security-web/register.do',
                        dataType:'json',
                        data:JSON.stringify(params),
                        contentType:'application/json',
                        success:function (data) {
                            layer.close(registerLoadIndex);
                            layer.msg(data);
                        },
                        error:function () {
                            layer.close(registerLoadIndex);
                            layer.alert("Request timed out!")
                        }
                    });
                },
                btn2:function (index,layero) {
                    //Reset callback var registerUsername = $('#registerUsername').val("");
                    var registerPassword = $('#registerPassword').val("");
                    var registerWellPassword = $('#registerWellPassword').val("");
                    // Prevent the registration page from closing return false;
                },
                btn3:function (index,layero) {
                    //Cancel callback}
            })
        }
    </script>

</body>
<div class="registerPage">
    <div class="registerDiv">
        <form>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>Username:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="registerUsername" class="layui-input adminInput" type="text" name="username" placeholder="Enter username" >
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>Password:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="registerPassword" class="layui-input adminInput" type="password" name="password" placeholder="Enter password">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>Confirm Password:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="registerWellPassword" class="layui-input adminInput" type="password" name="password" placeholder="Enter password">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>Role Type:</label>
                </div>
                <div class="passwordDiv">
                    <select id="roleSelect" class="layui-select">
                        <option value="">Please select...</option>
                        <option value="0">Agent</option>
                        <option value="1">Landlord</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
</div>
</html>

CSS

/*Login form style start*/
.wrap{
    width: 100%;
    height: 100%;
    background: url("../images/back.jpg") no-repeat;
    background-size: cover;
}
.loginForm{
    margin-left: 35%;
    margin-top: 10%;
    /*background-color: #cccccc;*/
    background-color: #e7e7e7;
    width: 400px;
    height: 400px;
    float: left;
    z-index: 9999;
    position: fixed;
    opacity: 0.75;
}
.usernameDiv{
    width: 300px;
    height: 40px;
    padding-left: 130px;
    padding-top: 30px;

}
.adminInput{
    width: 200px;
    height: 40px;
    font-size: 15px;
    border-radius: 0.5em;
    /*margin-left: auto;*/
    /*border: 1px solid #cccccc;*/
}
.passwordDiv{
    width: 300px;
    height: 40px;
    padding-left: 130px;
    padding-top: 28px;
}
.cardDiv{
    width: 120px;
    height: 40px;
    padding-top: 28px;
    padding-left: 14px;
    float: left;
}
.cardInput{
    width: 124px;
    height: 40px;
    font-size: 15px;
    border-radius: 0.5em 0em 0em 0.5em;
}
.codeDiv{
    width: 100px;
    height: 40px;
    padding-top: 28px;
    padding-right: 20px;
    float: left;
}
.codeInput{
    width: 80px;
    height: 40px;
    font-size: 15px;
    border-radius: 0em 0.5em 0.5em 0em;
    /*Verification code style*/
    font-family: Arial;
    font-style: italic;
    font-weight: bold;
    /*border: 0;*/
    letter-spacing: 2px;
    cursor: pointer;
}
i{
    position: absolute;
}
.adminIcon{
    font-size: 22px;
    margin-top: 8px;
    margin-left: 165px;
}
.logoHead{
    width: 250px;
    height: 60px;
    padding-left: 90px;
    padding-top: 25px;
}
.usernameLabel{
    width: 60px;
    height: 30px;
    font-size: 16px;
    float: left;
    margin-left: 55px;
    margin-top: 40px;
}
.submitLabel{
    width: 160px;
    height: 30px;
    font-size: 13px;
    float: left;
    margin-left: 55px;
    margin-top: 40px;
    cursor: pointer;
}
.usernameWrapDiv{
    width: 400px;
    height: 70px;
}
.submitDiv{
    width: 150px;
    height: 40px;
    padding-left: 10px;
    padding-top: 28px;
    float: left;
}
.submit{
    width: 100px;
    height: 40px;
    border-radius: 0.5em;
}
img{
    position: absolute;
}
.imgStyle{
    width: 100%;
    height: 100%;
}
/*Login form style end*/

/*Registration page style start*/
.registerPage{
    width: 100%;
    height: 100%;
    /*background-color: #cccccc;*/
    display: none;
    opacity: 0.75;
}
.registerDiv{
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0.75;
}
/*Registration page style end*/

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: