layui-登陆

最新推荐文章于 2024-08-20 15:50:34 发布
最新推荐文章于 2024-08-20 15:50:34 发布
阅读量2.1w 收藏 13
点赞数 4
分类专栏： Layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ajlgl/article/details/72514991
版权

layui-登陆

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>登陆</title>
        <link rel="stylesheet" href="layui/css/layui.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="icon" href="img/6.jpg">
    </head>
    <body>
        <div class="login-main">
    <header class="layui-elip">后台登录</header>
    <form class="layui-form">
        <div class="layui-input-inline">
            <input type="text" name="account" required  lay-verify="required" placeholder="邮箱" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <input type="password" name="password" required  lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline login-btn">
            <button type="submit" class="layui-btn">登录</button>
        </div>
        <hr/>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-primary">QQ登录</button>
        </div>
        <!--<div class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-normal">微信登录</button>
        </div>-->
        <p><a href="javascript:;" class="fl">立即注册</a><a href="javascript:;" class="fr">忘记密码？</a></p>
    </form>
</div>
<script src="layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form'], function () {
        var form = layui.form(), $ = layui.jquery;
    });
</script>
    </body>
</html>

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>登陆</title>
        <link rel="stylesheet" href="layui/css/layui.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="icon" href="img/favicon.png">
    </head>
    <body class="login-body body">

<div class="login-box">
    <form class="layui-form layui-form-pane" method="get" action="">
        <div class="layui-form-item">
            <h3>xx后台登录系统</h3>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账号：</label>

            <div class="layui-input-inline">
                <input type="text" name="account" class="layui-input" lay-verify="account" placeholder="账号" autocomplete="on" maxlength="20"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码：</label>

            <div class="layui-input-inline">
                <input type="password" name="password" class="layui-input" lay-verify="password" placeholder="密码" maxlength="20"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码：</label>

            <div class="layui-input-inline">
                <input type="number" name="code" class="layui-input" lay-verify="code" placeholder="验证码" maxlength="4"/><img src="img/v.png" onclick="getImage()" title="单击刷新验证码" id="img_rand_code" alt="">
            </div>
        </div>
        <div class="layui-form-item">
            <button type="reset" class="layui-btn layui-btn-danger btn-reset">重置</button>
            <button type="button" class="layui-btn btn-submit" lay-submit="" lay-filter="sub">立即登录</button>
        </div>
    </form>
</div>  
<script src="layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form', 'layer'], function () {
        var $ = layui.jquery,form = layui.form(),layer = layui.layer;
        // 验证
        form.verify({
            account: function (value) {
                if (value == "") {
                    return "请输入用户名";
                }
            },
            password: function (value) {
                if (value == "") {
                    return "请输入密码";
                }
            },
            code: function (value) {
                if (value == "") {
                    return "请输入验证码";
                }
            }
        });
        // 提交监听
        form.on('submit(sub)', function (data) {
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            });
            return false;
        })
    })

//刷新验证码
function getImage() {
//  $("#img_rand_code").attr("src", "" + Date());
    alert("123");
}


</script>
    </body>
</html>

这里写图片描述

岽仔玖等
关注
专栏目录
使用layui，vue后台界面
weixin_45430926的博客
08-18 1410
本文为登陆成功后加载的后台主界面。代码如下 加载layui中的css、js、vue简单粗暴的获取登录本地存储数据。重点为对业务逻辑要清楚明了。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-...
Layui之动态选项卡&iframe使用
qq_65345936的博客
07-18 1930
Layui之动态选项卡&iframe的使用
Layui登录界面
04-15
Layui登录界面+主页面；登录界面粒子特效；ajax传值到后台验证用户名密码；设备管理主页面
layui实现登录
weixin_30673611的博客
03-29 2617
一、layui简介 layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发. 获得layui 你可以在LayUI官网首页下载到 layui 的最新版，它经过了自动化...
Layui：一款强大的前端UI框架
最新发布
m0_46413639的博客
08-20 1353
在这些框架中，Layui凭借其优雅的设计、灵活的组件和丰富的功能，受到了广大开发者的喜爱。通过引入Layui的CSS和JavaScript文件，开发者可以方便地使用Layui提供的丰富组件，如按钮、表格、表单。灵活定制：Layui的组件具有很强的可定制性，开发者可以根据自己的需求修改组件的样式、颜色、大小等属性，使得组件能够更好地适应不同的网页应用场景。组件丰富：Layui提供了丰富的Web界面组件，如表格、表单、按钮、选项卡、弹出层等，可以满足大部分网页应用的开发需求。二、Layui的使用。
layui下的登录页首页
04-28
使用layui框架，登录页，菜单页和首页，自动生成菜单（三级），首页自动生成echart图（饼状图，柱状图和折线出），自动弹出公告框
一个简单的layui登陆界面
silentkunden的博客
01-26 3万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;link rel="stylesheet" href="layui/css/layui.css"&gt; &am
【Layui】入门必看：登录注册界面搭建与功能开发解析
无法自律的人的博客
07-11 3752
Layui是一款面向前端开发者的轻量级JavaScript库，旨在简化网页开发过程。它提供了丰富的基础UI组件和常用的工具函数，使开发者可以更快速地构建出优秀的网页界面。Layui具备以下特点和功能：简洁易用：Layui的设计理念是简洁而易用，它提供了直观的API和简单的配置，使开发者可以更快速地上手并快速构建界面。模块化加载：Layui采用模块化的加载方式，每个功能都是以独立的模块形式存在，开发者可以根据自己的需求按需加载所需的模块，避免了不必要的资源浪费。基础UI组件。
layui-用户登录界面响应式动画模板
06-08
layui是一款在中国广受欢迎的前端UI框架，以其简洁、优雅的样式和强大的功能深受开发者喜爱。在本项目中，“layui-用户登录界面响应式动画模板”是利用layui的组件和样式，构建了一个适应不同设备分辨率的登录界面，...
layui实现登陆界面验证码.docx
01-21
layui 实现登陆界面验证码 layui 是一个流行的前端框架，它提供了很多实用的功能和组件，其中包括实现登陆界面验证码的功能。在本文中，我们将详细介绍如何使用 layui 实现登陆界面验证码。 首先，让我们来看看 ...
SSM+Layui实现登陆的案例
MiniPang123_的博客
11-21 6632
第一步:需要在Mapper层实现的接口 List&lt;User&gt; login(@Param("param") Map map); 第二步:需要在XML文件中写SQL语句 &lt;select id="login" resultMap="BaseResultMap"&gt;  SELECT * from user wherer username = ${param.username...
LayUI登录页面
qq_42375391的博客
04-29 1万+
使用LayUI对你所做系统进行前端的美化和交互完善设计，使得系统的操作和交互更加符合人机交互理念（以其中一个页面，如登录，注册，后台主页面为例，将截图上传即可，截图包括界面设计、数据交互过程、数据库数据变化，注意不必把所有页面的设计美化进行上传，只需要一个功能的即可！！！！！！） <!DOCTYPE html> <html lang="en"> <head&g...
layui 实现登录
weixin_45833112的博客
05-29 6507
layui 实现登录效果
layui入门
m0_68879220的博客
04-22 1632
1.什么是layui layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交...
采用layui框架实现登录页面样式
qq_34884166的博客
12-20 2248
源码下载：微信小程序搜 “涨知识1024” ，搜索关键字“登录页”
Layui实现之登陆页面&&实现扩展模块
Bugxiu_fu的博客
07-26 3203
Layui实现扩展模块案例与登陆页面
layui实现登录页面
热门推荐
lv970814的博客
09-29 5万+
首先给看下效果图吧！ html、js <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <script src="./js/res_js/jquery-3.4.1.min.js"></sc...
【教程】使用layui制作简单的登录界面
hifhf的专栏
04-19 3991
layui版本v2.2.6效果如下图：html部分（含js调用）<divclass="login-main"> <headerclass="layui-elip">后台登录</header> <formclass="layui-form-item"name="form1"method="post"a...
Layui实现登录
wqww_1的博客
05-26 1087
前端 导入所有前端依赖 <link rel="icon" href="${ctx}/images/favicon.ico"> <link rel="stylesheet" href="${ctx}/lib/layui-v2.5.5/css/layui.css" media="all"> <link rel="stylesheet" href="${ctx}/css/layuimini.css" media="all"> <link rel="stylesheet"
.demo-login-container{width: 320px; margin: 21px auto 0;} .demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
05-15
这是一段CSS样式代码，它定义了一个类名为"demo-login-container"的元素的宽度为320像素，上外边距为21像素，左右外边距为自动居中。另外，它还定义了一个类名为"demo-login-other"的元素中，所有包含layui-icon类名的子元素都会被设置为相对定位，并且在垂直方向上上下各偏移2像素，字体大小为26像素。这段样式代码通常用于网页的登陆页面或者表单页面的设计。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值