基于layui实现登录页面

本文实例为大家分享了layui实现登录页面的具体代码,供大家参考,具体内容如下

首先给看下效果图吧!

html、js

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</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">房产销售平台管理系统</h2>-->
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>用户名:</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="输入用户名" >
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>密码:</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="输入密码">
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>验证码:</label>
                    </div>
                    <div class="cardDiv">
                        <input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="输入验证码">
                    </div>
                    <div class="codeDiv">
                        <input id="loginCode" class="layui-input codeInput"  type="button">
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="submitLabel">
                        <label>没有账号?<a href="#" rel="external nofollow"  id="loginRegister">点击注册</a></label>
                    </div>
                    <div class="submitDiv">
                        <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录"></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 () {
            // 页面初始化生成验证码
            window.onload = createCode('#loginCode');
            // 验证码切换
            $('#loginCode').click(function () {
                createCode('#loginCode');
            });
            // 登陆事件
            $('#loginBtn').click(function () {
                login();
            });
            // 注册事件
            $('#loginRegister').click(function () {
                register();
            });
        });
        // 生成验证码
        function createCode(codeID) {
            var code = "";
            // 验证码长度
            var codeLength = 4;
            // 验证码dom元素
            var checkCode = $(codeID);
            // 验证码随机数
            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++){
                // 随机数索引
                var index = Math.floor(Math.random()*36);
                code += random[index];
            }
            // 将生成的随机验证码赋值
            checkCode.val(code);
        }
        // 校验验证码、用户名、密码
        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("用户名不能为空");
                return false;
            }
            if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
                layer.alert("密码不能为空");
                return false;
            }
            if (inputCode.length<=0){
                layer.alert("验证码不能为空");
                return false;
            }
            if (inputCode != cardCode){
                layer.alert("请输入正确验证码");
                return false;
            }
            return true;
        }
        // 登录流程
        function login() {
            if (!validateCode('#loginCard','#loginCode')){
                //阻断提示
            }else {
                var loginUsername = $('#loginUsername').val();
                var loginPassword = $('#loginPassword').val();
                var params = {};
                params.loginUsername = loginUsername;
                params.loginPassword = loginPassword;
                var loginLoadIndex = layer.load(2);
                $('#loginBtn').val("正在登录...");
                $.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("登录");
                    }
                });
            }

        }
        // 注册流程
        function register() {
            layer.open({
                type:'1',
                content:$('.registerPage'),
                title:'注册',
                area:['430px','400px'],
                btn:['注册','重置','取消'],
                closeBtn:'1',
                btn1:function (index,layero) {
                    //注册回调
                    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("请求超时!")
                        }
                    });
                },
                btn2:function (index,layero) {
                    //重置回调
                    var registerUsername = $('#registerUsername').val("");
                    var registerPassword = $('#registerPassword').val("");
                    var registerWellPassword = $('#registerWellPassword').val("");
                    // 防止注册页面关闭
                    return false;
                },
                btn3:function (index,layero) {
                    //取消回调
                }
            })
        }
    </script>

</body>
<div class="registerPage">
    <div class="registerDiv">
        <form>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>用户名:</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="输入用户名" >
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码:</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="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>确认密码:</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="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>角色类型:</label>
                </div>
                <div class="passwordDiv">
                    <select id="roleSelect" class="layui-select">
                        <option value="">请选择...</option>
                        <option value="0">经纪人</option>
                        <option value="1">房东</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
</div>
</html>

css

/*登陆表单样式 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;
    /*验证码样式*/
    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%;
}
/*登陆表单样式 end*/

/*注册页面样式 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;
}
/*注册页面样式 end*/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • SSM+layUI 根据登录信息显示不同的页面方法

    最近在用SSM+layUI做自己的一个小项目,用到要根据登录信息显示不同页面的问题,和大家分享下,如有不足,欢迎指出. 在开始之前先给大家看下效果 用户登录之前,登录位置显示的是登录. 下面是系统的登录界面 用户登录之后的页面,原来的登录位置信息变化了. 鼠标放上去: 下面放上处理的代码,主要是在jsp中嵌入java代码,判断用户有没有登录来实现的,如果有更好的方法,欢迎留言: <ul class="layui-nav" lay-filter=""> &

  • 基于layui实现登录页面

    本文实例为大家分享了layui实现登录页面的具体代码,供大家参考,具体内容如下 首先给看下效果图吧! html.js <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <script src="./js/res_js/jquery-3.4.1.min.js"></script> &

  • 五个基于JS实现的炫酷登录页面

    目录 1.炫酷星空登录 2.动态云层登录 3.深海灯光水母登录 4.炫酷蛛网登录 5.彩色气泡登录 1.炫酷星空登录 实现代码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>运营系统登录页</title> <link href=

  • 基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式

    本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果.并且基于 Vue.js 2.0 全家桶.具体效果如下图所示: 最终效果可以翻到文章最后观看. 1. 背景视频 Web 页面的既有实现方式 国外有一个很好的网站 「Coverr」 ,提供了完善的教程和视频资源,帮助前端开发者构建酷炫的背景视频主页,网站效果示例如下图所示: 教程如下所示: 从图中以及我

  • node基于puppeteer模拟登录抓取页面的实现

    关于热图 在网站分析行业中,网站热图能够很好的反应用户在网站的操作行为,具体分析用户的喜好,对网站进行针对性的优化,一个热图的例子(来源于ptengine) 上图中能很清晰的看到用户关注点在那,我们不关注产品中热图的功能如何,本篇文章就热图的实现做一下简单的分析和总结. 热图主流的实现方式 一般实现热图显示需要经过如下阶段: 1.获取网站页面 2.获取经过处理后的用户数据 3.绘制热图  本篇主要聚焦于阶段1来详细的介绍一下主流的在热图中获取网站页面的实现方式 4.使用iframe直接嵌入用户网

  • 基于Python的自媒体小助手---登录页面的实现代码

    核心技术:Python3.7 GUI技术:Tkinter (Python已经内置) 好多文章写Python GUI之tkinter窗口视窗教程大集合(看这篇就够了) 我看了N遍也没够好多东西都没有就基本的介绍...还不够.我搞这个也是为了项目服务先给大家来个截图吧,其实知识点还是蛮多的. 在window上有点瑕疵了,在mac上海可以吧.使用到的技术我罗列一下完了在分享给大家代码. 1.窗体设置标题和设置图标,图标格式是ICO的,一般我们事宜Png转一下.https://www.easyicon.

  • 基于python使MUI登录页面的美化

    目录 1.前言 2.问题描述 3.解决方案 (1)背景美化 (2)输入框美化 4.结语 本文转自微信公众号:"算法与编程之美" 1.前言 之前的文章Python用HBuilder创建交流社区APP我们已经在HBuilder上创建的APP ,现HBuilder中已经有了登录页面的相关的html文件,但是按照html已有的页面来看,它缺少外观的美化.现在大多数软件需要外观的加成,本篇文章主要讲的是MUI登录页面的美化. 2.问题描述 在将主要的内容构造之后,如今思考如何实现将页面进行美化是

  • 基于Layui自定义模块的使用方法详解

    layui是一个极其不错的前端UI框架.是后端程序员的福音.总之如果你是一个后端开发者.如果你苦于你的界面"惨不忍睹".选择layui来开发是个极好的选择. 之前的项目也有使用过layui.只是没有过多的关注其框架本身.对于项目上.拿来即用即可! 为什么要自定义模块呢?好处很多.比如可以大量重用代码...... 我也是一个极其懒惰的人.总是想办法让代码可重用 根据layui官方的文档说明.首先第一步是要确定你要扩展的模块名称 我现在做的是登录功能.因此我的扩展模块名叫 login 使用

  • 如何基于layui的laytpl实现数据绑定的示例代码

    想了半天才想起自己园子的登录密码.可想而知,多长时间没登录了 正文 一开始用layui做了几个管理系统,所以用起来觉得确实很容易上手,管理后台最常用的就是form和table以及弹窗类.layui提供的form table layer已经是很简洁好用了,抛开底层的封装不说,给我们展现出来的使用方法我觉得是非常简化了.管理用到的除了form table layer之外,经常会有一些统计数据展示或者详情页这种内容展示.那么一些用到的统计数据(除图表),如文字统计型数据展示.这个时候,用layui的基

  • asp.net c#采集需要登录页面的实现原理及代码

    首先说明:代码片段是从网络获取,然后自己修改.我想好的东西应该拿来分享. 实现原理:当我们采集页面的时候,如果被采集的网站需要登录才能采集.不管是基于Cookie还是基于Session,我们都会首先发送一个Http请求头,这个Http请求头里面就包含了网站需要的Cookie信息.当网站接收到发送过来的Http请求头时,会从Http请求头获取相关的Cookie或者Session信息,然后由程序来处理,决定你是否有权限访问当前页面. 好了,原理搞清楚了,就好办了.我们所要做的仅仅是在采集的时候(或者

随机推荐