基于layui如何实现登录页面

• 攻略

技术基于layui如何实现登录页面本篇内容主要讲解“基于layui如何实现登录页面”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“基于layui如何实现登录页面”吧!首先给看下

本篇内容主要讲解"基于获得如何实现登录页面",感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"基于获得如何实现登录页面"吧！

首先给看下效果图吧！

基于layui如何实现登录页面

html、js

！DOCTYPEhtml

超文本标记语言

头

metachartset=' UTF-8 '

标题登录/title

scriptsrc=' ./js/RES _ js/jquery-3。4 .1 .量滴js /脚本

linkrel='样式表href=' ./js/layui/css/layui.css '

linkrel='样式表href=' ./CSS/AdminLogon。' CSS '

/head

身体

divclass='wrap '

img src=' images/back。jpg ' class=' img style '

divclass='loginForm '

形式

divclass='logoHead '

！- h3房产销售平台管理系统/h3 -

/div

divclass=' usernameWrapDiv '

divclass='usernameLabel '

标签用户名：/标签

/div

nbsp;       <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*/

到此，相信大家对“基于layui如何实现登录页面”有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/119046.html

赞 (0)

相关推荐

  • Tomcat中如何清理缓存

    技术Tomcat中如何清理缓存这篇文章将为大家详细讲解有关Tomcat中如何清理缓存，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。一、关于Tomcat“缓存”的介绍 很多时候

    攻略 2021年12月11日

  • 怎么使用Binlog

    技术怎么使用Binlog本篇内容介绍了“怎么使用Binlog”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！不知道是否你还

    攻略 2021年10月28日

  • 本周最新文献速递20211114

    技术本周最新文献速递20211114 本周最新文献速递20211114本周最新文献速递20211114一、精细解读文献 一
    文献题目： Mapping the proteo-genomic conver

    礼包 2021年11月15日

  • 5个常用的MySQL数据库管理工具是什么呢

    技术5个常用的MySQL数据库管理工具是什么呢这篇文章将为大家详细讲解有关5个常用的MySQL数据库管理工具是什么呢，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。 MyS

    攻略 2021年12月1日

  • Java正则表达式中如何实现分组和替换

    技术Java正则表达式中如何实现分组和替换小编给大家分享一下Java正则表达式中如何实现分组和替换，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！正则表达式的子表达式（分组）不是很好懂，但却是很强大的文本

    攻略 2021年11月30日

  • 广义货币m2,广义货币M2是具体指什么

    技术广义货币m2,广义货币M2是具体指什么广义货币是一个经济学概念广义货币m2，和狭义货币相对应，货币供给的一种形式或口径，以M2来表示，其计算方法是交易货币以及定期存款与储蓄存款。
    我国现阶段也是将货币供应量划分为三个

    生活 2021年10月24日