layui弹出层在登录中的应用

最新推荐文章于 2023-07-11 13:20:27 发布
最新推荐文章于 2023-07-11 13:20:27 发布
阅读量1.4k 收藏 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>

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

给我晕车药
关注
  • 8
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
01-19
layer是一款近年来备受青睐的web弹层组件，官网地址是：http://layer.layui.com/ 可以从官网上下载最新版本. 使用layer实现登录弹框，登录成功以后关闭弹框，并调用父窗口方法。 1.界面如下： 2.login.html的界面主要代码: 手机号码： <input type=text id=username placeholder=手机号码 c
Layui--layer的弹窗的使用
For_if_while的博客
06-09 730
Layui一款开源的前端框架，UI样式简洁大方 layer弹窗使用简单，无需自己写css样式，可以直接使用； 使用方式： 在此推荐下载Layui源码包的方式使用： 下载Layui源码包： https://www.layui.com/ 下载完成后，将文件解压到项目中 在需要使用的HMTL文件中 ，引入css文件和js文件 <link rel="stylesheet" href="/static/layui-v2.6.8/layui/css/layui.css"> <script src=
用layui做一个简易的登录注册页面
weixin_44219955的博客
01-10 1万+
用layui做一个简易的登录注册页面 1.首先在主页绑定一个点击事件，点击登录按钮就可以弹出一个弹出窗，一般商场登录页面不会跳转一个新页面，因为如果进入一个新页面，登录后需要跳转会原来的页面，这样会导致用户体验感比较差。 <script> //JavaScript代码区域 layui.use(['element', 'layer'], function () { var element = layui.eleme
LayUi做登录注册
热门推荐
weixin_44389353的博客
03-25 1万+
LayUi登录注册页面附代码登录页面注册页面附加CSS，JS代码 登录页面 下面展示登录页面 代码如下。 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" class="loginHtml"> <head> <meta charset="utf-8"> <titl...
Layui的入门级教学，基本使用及如何实现登入与注册页面
m0_73192864的博客
07-11 549
layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来官方网站。
layer 弹窗
github_39423829的博客
03-22 5668
简介 layer 是layui的一个弹出层组件，但是可以作为独立组件使用。单独使用去layer官网下载独立组件包，并且需引入jQuery1.8以上版本。 引入好layer.js后，直接用即可 <script src="layer.js"></script> <script> layer.msg('hello'); </script> 基础参数 type：类型Number，0（信息框，默认），1（页面层），2（iframe层），3（加载层），4（tips
layui 弹出层值回传解决方式
10-16
首先，我们来看一下layui弹出层的基本结构。通过`layer.open()`函数可以创建弹出层，参数包括类型（type）、标题（title）、是否可关闭（shadeClose）、遮罩透明度（shade）、弹出层宽高（area）以及内容（content）...
layui 弹出层回调获取弹出层数据的例子
10-16
本文将详细讲解如何在layui弹出层中实现回调获取弹出层数据，并通过示例代码进行解析。 首先，layui的弹出层通过`layer.open()`方法创建。在该方法中，我们可以设置弹出层的类型（type）、标题（title）、可最大化...
layui弹出层效果实现代码
08-30
2.移动应用程序：layui弹出层效果实现代码可以应用于移动应用程序中，例如弹出菜单、提示框等。 3.桌面应用程序：layui弹出层效果实现代码可以应用于桌面应用程序中，例如弹出菜单、提示框等。 layui弹出层效果实现...
LayUI弹出层（html）
03-12
LayUI弹出层（html）主要用于在页面上生成包含HTML内容的弹窗。这通常涉及到以下几个方面： 1. **基础用法**：LayUI弹出层可以通过`layui.layer.open()`方法来创建。这个方法接受一个参数，这是一个配置对象，其中...
解决layui弹出层layer的area过大被遮挡的问题
10-16
在使用layui框架开发Web应用时，经常会遇到弹出层layer的使用。layer是layui中的一个模块，用于创建各种类型的弹窗，如提示、消息、iframe等。然而，在实际使用过程中，有时我们会设置area属性来定义弹出层的宽高，...
layui框架学习（24：弹出层模块_消息框&提示框）
gc_2299的博客
05-25 8307
学习并记录了弹出层模块layer中最简单的提示框和信息框的用法及常用属性设置
LayUI系列（一）之layui介绍以及登录功能的实现
lijie1025的博客
07-11 2090
layui基本介绍以及登录功能的实现（有源码）
layui新建登录、注册和layer 弹窗层
QWERTY55555的专栏
03-30 1013
代码如下： <%@ 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的登录注册页面模板
猿小白的博客
05-01 4756
在layui 版本2.8+中，提供了好看的登录注册模板。
layer弹出层的简单使用
qq_40340434的博客
05-11 1986
一、layer的icon样式以上样式测试代码：[javascript]&amp;nbsp;view plain&amp;nbsp;copylayer.confirm(‘icon测试’,&amp;nbsp;{icon:&amp;nbsp;1,&amp;nbsp;title:‘提示’},&amp;nbsp;function(index){&amp;nbsp
关闭layui弹出层，弹出层出现在HTML下方的问题
weixin_52516170的博客
08-08 870
在使用layui弹出层弹出登录表单的时候，发现关闭登录弹窗后，发现弹窗出现在HTML页面的下方的问题。$('#login').hide()}即可。在下方添加代码： end:function(){
前端框架Layui的使用讲解（Layui搭建登录注册页面）
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
07-11 1万+
Layui的设计理念是简洁、直观和高效，旨在提供轻量级且易于上手的前端解决方案。它提供了丰富的UI组件，如按钮、表格、表单、导航、分页等，以及强大的模块化功能，例如弹层、日期选择器、上传组件等。使用Layui，你可以轻松构建出具有现代化风格和友好交互的Web界面。
layui 弹出层中的弹出层 层级调节
最新发布
09-14
在 layui 弹出层中，可以通过设置 zIndex 属性来调节弹出层的层级。zIndex 属性是一个整数，数值越大，表示该元素在层叠顺序中的层级越高。 具体步骤如下： 1. 在弹出层的配置项中，通过设置 zIndex 属性来调节层级...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值