layui弹出层在登录中的应用

最新推荐文章于 2024-10-30 22:37:01 发布
最新推荐文章于 2024-10-30 22:37:01 发布
阅读量1.5k 收藏 11
点赞数 8
分类专栏： 功能实现 技术分享 日常相关 文章标签： html5 javascript jquery layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GeiWo_YunCheYao/article/details/112425723
版权

layui弹出层在登录中的应用

首先写好登录界面，然后在主界面登录按钮上添加layui弹出层。

登录界面、注册界面二合一（含表单验证）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .login{
            margin-top: 100px;
            min-height: 400px;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-md4 layui-col-md-offset4 login">
                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">登录</li>
                        <li>注册</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <form action="" class="layui-form layui-form-pane">
                                <div class="layui-form-item">
                                    <label class="layui-form-label"><i class="layui-icon layui-icon-user"></i></label>
                                    <div class="layui-input-block">
                                        <input type="text" name="username"  lay-verify="required|username" class="layui-input" placeholder="用户名">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
                                    <div class="layui-input-block">
                                        <input type="password" name="password" required lay-verify="required|password" class="layui-input" placeholder="密码">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label"><i class="layui-icon layui-icon-friends"></i></label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="grade" value="管理员" title="管理员">
                                        <input type="radio" name="grade" value="用户" title="用户" checked>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-row layui-col-space20">
                                        <div class="layui-col-md8 layui-col-xs8">
                                            <input type="text" name="code" required lay-verify="required" class="layui-input" placeholder="验证码">
                                        </div>
                                        <div class="layui-col-md4 layui-col-xs4">
                                            <img src="https://www.oschina.net/action/user/captcha">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn" lay-submit>登录</button>
                                    <span style="margin-left: 30px"><a href="#">忘记密码</a></span>
                                </div>
                            </form>
                        </div>

                        <div class="layui-tab-item">
                            <form action="" class="layui-form layui-form-pane">
                                <div class="layui-form-item">
                                    <label class="layui-form-label"><i class="layui-icon layui-icon-user"></i></label>
                                    <div class="layui-input-block">
                                        <input type="text" name="username2" required lay-verify="required|username" class="layui-input" placeholder="用户名">

                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
                                    <div class="layui-input-block">
                                        <input type="password" name="password2" required lay-verify="required|password" class="layui-input" placeholder="密码">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label"><i class="layui-icon layui-icon-cellphone"></i></label>
                                    <div class="layui-input-block">
                                        <input type="text" name="phone" required lay-verify="required|phone" class="layui-input" placeholder="手机号">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-row layui-col-space20">
                                        <div class="layui-col-md8 layui-col-xs8">
                                            <input type="text" name="code2" required lay-verify="required" class="layui-input" placeholder="验证码">
                                        </div>
                                        <div class="layui-col-md4 layui-col-xs4">
                                            <a class="layui-btn">发送验证码至手机</a>
                                        </div>

                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn" lay-submit>注册</button>
                                    <span style="margin-left: 30px"><a href="#">已有账号，去登陆</a></span>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="layui/layui.js"></script>
    <script>
        layui.use(["element","form","layer"],function () {
            var element = layui.element;
            var form = layui.form;
            var layer = layui.layer;
            
			//表单验证功能
            form.verify({
                username: function(value, item){ //value：表单的值、item：表单的DOM对象
                    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                        return '用户名不能有特殊字符';
                    }
                    if(/(^\_)|(\__)|(\_+$)/.test(value)){
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if(/^\d+\d+\d$/.test(value)){
                        return '用户名不能全为数字';
                    }
                }
                ,password: [
                    /^[\S]{6,12}$/
                    ,'密码必须6到12位，且不能出现空格'
                ]
                ,phone:[
                    /^\d{11}$/
                    ,"手机号必须为11位数字"
                ]
            });
        })
    </script>
</body>
</html>

效果图：
在这里插入图片描述
在这里插入图片描述

绑定弹出层

jquery选中登录按钮，然后添加点击事件，然后使用layui弹出层（iframe层）

<script>
    $(".login").click(function () {
        layui.use('layer',function () {
            var layer = layui.layer;
            layer.open({
                type: 2,//iframe层
                title: "信息",//标题
                area: ['40%', '550px'],//弹出区域
                content: "login.html",//所需弹出的登录/注册界面
                offset: '50px'//设置弹出层在距离顶部，100px 水平居中
            });
        })
    })
</script>

效果图：
在这里插入图片描述

给我晕车药
关注
专栏目录
Layui登录界面
04-15
Layui登录界面+主页面；登录界面粒子特效；ajax传值到后台验证用户名密码；设备管理主页面
layui 弹出层回调获取弹出层数据的例子
10-16
本文将详细讲解如何在layui弹出层中实现回调获取弹出层数据，并通过示例代码进行解析。 首先，layui的弹出层通过`layer.open()`方法创建。在该方法中，我们可以设置弹出层的类型（type）、标题（title）、可最大化...
layui新建登录、注册和layer 弹窗层
QWERTY55555的专栏
03-30 1058
代码如下： <%@ page contentType="text/html;charset=utf-8" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="layui/css/layui.css"> .
layui实现后台管理系统界面
最新发布
爱吃五花肉EMin的博客
10-30 522
layui框架版本：2.5.8。
使用layui+SliderCaptcha实现登录弹窗验证登录
qq_41884677的博客
05-24 1262
开源代码地址：SliderCaptcha layui包自行引入 1：下载SliderCaptcha包并导入项目中 在head引入css： <link href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"> <link href="/css/slidercaptcha.min.css" rel="stylesheet" type="text/css"> 在body尾引
layui登录php,Layui.php
weixin_31038719的博客
03-09 196
>[danger] layui 相关功能封装```php// 获取类的实例// function layui()// {// return Layui::getInstance();// }/*** layui接口数据格式规范封装* @last modify time 2020-07-20*/class Layui{private static $obj;// 禁止类在外部被克隆privat...
使用layui的弹出层表单，在页面弹出表单
世上哪有什么岁月静好,不过是有人替你负重前行
01-20 8804
弹出层表单很常见,也很实用,无论是在pc端网页还是在移动端. 现在用layui来实现一下这个表单吧. html <form class="layui-form" id="test" style="display:none"> <div class="layui-form-item"> <label class="layui-form-label">输入框</label> <div class="layui-input-block"&g
layui 弹出层值回传解决方式
10-16
首先，我们来看一下layui弹出层的基本结构。通过`layer.open()`函数可以创建弹出层，参数包括类型（type）、标题（title）、是否可关闭（shadeClose）、遮罩透明度（shade）、弹出层宽高（area）以及内容（content）...
layui弹出层效果实现代码
08-30
2.移动应用程序：layui弹出层效果实现代码可以应用于移动应用程序中，例如弹出菜单、提示框等。 3.桌面应用程序：layui弹出层效果实现代码可以应用于桌面应用程序中，例如弹出菜单、提示框等。 layui弹出层效果实现...
解决layui弹出层layer的area过大被遮挡的问题
10-16
在使用layui框架开发Web应用时，经常会遇到弹出层layer的使用。layer是layui中的一个模块，用于创建各种类型的弹窗，如提示、消息、iframe等。然而，在实际使用过程中，有时我们会设置area属性来定义弹出层的宽高，...
LayUI弹出层（html）
03-12
LayUI弹出层（html）主要用于在页面上生成包含HTML内容的弹窗。这通常涉及到以下几个方面： 1. **基础用法**：LayUI弹出层可以通过`layui.layer.open()`方法来创建。这个方法接受一个参数，这是一个配置对象，其中...
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
01-19
layer是一款近年来备受青睐的web弹层组件，官网地址是：http://layer.layui.com/ 可以从官网上下载最新版本. 使用layer实现登录弹框，登录成功以后关闭弹框，并调用父窗口方法。 1.界面如下： 2.login.html的界面主要代码: 手机号码： <input type=text id=username placeholder=手机号码 c
登录注册弹出框以及弹出框校验
01-23
点击登录、注册按钮显示对应的弹出框界面，在对应注册弹出界面上会对文本框做失去焦点的校验，以及表单提交时对账户、密码的校验。
layui弹出层表单
热门推荐
luoawai的博客
07-03 3万+
弹出层表单很常见,也很实用,无论是在’pc端网页还是在移动端. 现在用layui来实现一下这个表单吧. html <form class="layui-form" id="test" style="display:none"> <div class="layui-form-item"> <label class="layui-form-label">...
layui登录php,layui登录页面
weixin_28750663的博客
03-09 743
摘要：基本思路：首先要引入layui的核心样式文件和基础核心库两个部分。之后借助layui工具在设计的网页中依次加入后台管理系统以及通过表单栏添加的用户名、密码、以及登录和验证码部分，最后完成相关布局。全部代码：html>登录<基本思路：首先要引入layui的核心样式文件和基础核心库两个部分。之后借助layui工具在设计的网页中依次加入后台管理系统以及通过表单栏添加的用户名、密...
php 弹出 layui,layui_弹出层
weixin_36153937的博客
04-02 256
摘要： 管理员列表管理员列表添加管理员关键字手机号搜索ID号用户名真是姓名手机号角色最近登录ip登录次数状态注册时间操作1贤心贤心15855555555仓库员127.0.0.110正常2016-11-29编辑删除查看日志2无线无线138555255仓库员127.0.0.110正常2016-11-29编辑删除查看日志用户名真实姓名手机号(选填)密码选择角色北京上海广州深圳杭州状态保存重...
layui弹框的简单使用
demo_gsl的博客
04-17 2229
layui弹框的简单使用 1.准备工作 首先去http://layer.layui.com/去下载layer插件： 然后解压，找到layer文件夹copy到你的开发环境中图片如下： Jquery要求1.8以上，在引入layer.js就可以用了。 <script src="${...
用layui做一个简易的登录注册页面
weixin_44219955的博客
01-10 1万+
用layui做一个简易的登录注册页面 1.首先在主页绑定一个点击事件，点击登录按钮就可以弹出一个弹出窗，一般商场登录页面不会跳转一个新页面，因为如果进入一个新页面，登录后需要跳转会原来的页面，这样会导致用户体验感比较差。 <script> //JavaScript代码区域 layui.use(['element', 'layer'], function () { var element = layui.eleme
layui选项卡与弹出层效果实现代码示例
在描述的代码示例中，首先引入了layui的CSS样式文件，确保元素能够按照layui的设计样式显示。接着，HTML结构中使用了`layui-tab`类来定义选项卡容器，`layui-tab-title`用于放置选项卡标题，`layui-tab-content`则...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值