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><spanstyle="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><spanstyle="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弹出层在登录中的应用相关推荐

layui弹出层中添加下拉框
layui弹出层中添加下拉框实习不到两个月,踩到的坑使用layui写了一个项目,负责其中的一小块,其中有一个页面需要在弹出层中写一个下拉框代码如下: <div class="la ...
js layui 弹出子窗体_Layui中JS实现弹出层的应用
点我 //弹出一个页面层 var oBtn = document.getElementById('tab_1'); oBtn.onclick = function (){ layer.open({ t ...
php jquery ajax登录,jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用.常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息.本文我们将给大家介绍 ...
html5 注册协议弹出层,js制作带有遮罩弹出层实现登录注册表单特效代码分享
本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图: ----------------------查 ...
layui弹出层：使用icon图标小结
文章目录 layui弹出层:icon图标小结表格示下: 调用代码 · 效果图 · 示下: layui弹出层:icon图标小结 layui的弹框插件layer中,有很多不同场景需要的弹框icon图标, ...
layui弹出层：皮肤扩展（文档解读）
layui弹出层:皮肤扩展(文档解读) layui弹出层:样式自定义官方文档:https://layer.layui.com/ 皮肤扩展 · 官方教程: 官方文档:https://layer.lay ...
js制作带有遮罩弹出层实现登录小窗口
要实现的效果如下点击"登录"按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击"登录"按钮之前登录小窗口 ...
Layui 弹出层插件
Layui 弹出层插件开发工具与关键技术: Visual Studio 2015 – Layui 作者:廖亚星撰写时间:2019年 6 月4日这段时间在做项目页面的搭建,在页面的操作中,会出现很 ...
layui弹出框php,layui弹出层怎么使用
layui弹出层的使用方法:首先引入jQuery1.8以上的任意版本:然后引入laery.js:最后通过"function show(){var a = layer.open({...}); ...

layui弹出层在登录中的应用

layui弹出层在登录中的应用

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

绑定弹出层

layui弹出层在登录中的应用相关推荐

最新文章

热门文章