layui-简单的登录注册界面

最新推荐文章于 2023-07-11 09:19:19 发布
最新推荐文章于 2023-07-11 09:19:19 发布
阅读量6.2k 收藏 25
点赞数 1
文章标签： javascript php 数据库 ViewUI
原文链接：http://www.cnblogs.com/davis16/p/8697808.html
版权
本文介绍了使用layui框架创建登录注册界面的步骤，包括register.html、reg.php、checkUser.php、login.html、login.php、index.php、logout.php等源代码，并提供了样式文件style.css。实现了完整的用户注册验证和登录流程，附带实际展示效果。
摘要由CSDN通过智能技术生成

register.html 源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>注册页</title>
    <link rel="stylesheet" href="../frame/layui/css/layui.css">
    <link rel="stylesheet" href="../frame/static/css/style.css">
    <link rel="icon" href="../frame/static/image/code.png">
</head>
<body>

<div class="login-main">
    <header class="layui-elip" style="width: 82%">注册页</header>

    <!-- 表单选项 -->
    <form class="layui-form">
        <div class="layui-input-inline">
            <!-- 用户名 -->
            <div class="layui-inline" style="width: 85%">
                <input type="text" id="user" name="account" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
            <!-- 对号 -->
            <div class="layui-inline">
                <i class="layui-icon" id="ri" style="color: green;font-weight: bolder;" hidden></i>
            </div>
            <!-- 错号 -->
            <div class="layui-inline">
                <i class="layui-icon" id="wr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
            </div>
        </div>
            <!-- 密码 -->
        <div class="layui-input-inline">
            <div class="layui-inline" style="width: 85%">
                <input type="password" id="pwd" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <!-- 对号 -->
            <div class="layui-inline">
                <i class="layui-icon" id="pri" style="color: green;font-weight: bolder;" hidden></i>
            </div>
            <!-- 错号 -->
            <div class="layui-inline">
                <i class="layui-icon" id="pwr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
            </div>
        </div>
            <!-- 确认密码 -->
        <div class="layui-input-inline">
            <div class="layui-inline" style="width: 85%">
                <input type="password" id="rpwd" name="repassword" required  lay-verify="required" placeholder="请确认密码" autocomplete="off" class="layui-input">
            </div>
            <!-- 对号 -->
            <div class="layui-inline">
                <i class="layui-icon" id="rpri" style="color: green;font-weight: bolder;" hidden></i>
            </div>
            <!-- 错号 -->
            <div class="layui-inline">
                <i class="layui-icon" id="rpwr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
            </div>
        </div>


        <div class="layui-input-inline login-btn" style="width: 85%">
            <button type="submit" lay-submit lay-filter="sub" class="layui-btn">注册</button>
        </div>
        <hr style="width: 85%" />
        <p style="width: 85%"><a href="login.html" class="fl">已有账号？立即登录</a><a href="javascript:;" class="fr">忘记密码？</a></p>
    </form>
</div>


<script src="../frame/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form','jquery','layer'], function () {
        var form   = layui.form;
        var $      = layui.jquery;
        var layer  = layui.layer;
        //添加表单失焦事件
        //验证表单
        $('#user').blur(function() {
            var user = $(this).val();

            //alert(user);
            $.ajax({
                url:'checkUser.php',
                type:'post',
                dataType:'text',
                data:{user:user},
                //验证用户名是否可用
                success:function(data){
                    if (data == 1) {
                        $('#ri').removeAttr('hidden');
                        $('#wr').attr('hidden','hidden');


                    } else {
                        $('#wr').removeAttr('hidden');
                        $('#ri').attr('hidden','hidden');
                        layer.msg('当前用户名已被占用! ')

                    }

                }
            })

        });

        // you code ...
        // 为密码添加正则验证
        $('#pwd').blur(function() {
                var reg = /^[\w]{6,12}$/;
                if(!($('#pwd').val().match(reg))){
                    //layer.msg('请输入合法密码');
                    $('#pwr').removeAttr('hidden');
                    $('#pri').attr('hidden','hidden');
                    layer.msg('请输入合法密码');
                }else {
                    $('#pri').removeAttr('hidden');
                    $('#pwr').attr('hidden','hidden');
                }
        });

        //验证两次密码是否一致
        $('#rpwd').blur(function() {
                if($('#pwd').val() != $('#rpwd').val()){
                    $('#rpwr').removeAttr('hidden');
                    $('#rpri').attr('hidden','hidden');
                    layer.msg('两次输入密码不一致!');
                }else {
                    $('#rpri').removeAttr('hidden');
                    $('#rpwr').attr('hidden','hidden');
                };
        });

        //
        //添加表单监听事件,提交注册信息
        form.on('submit(sub)', function() {
            $.ajax({
                url:'reg.php',
                type:'post',
                dataType:'text',
                data:{
                    user:$('#user').val(),
                    pwd:$('#pwd').val(),
                },
最低0.47元/天 解锁文章
weixin_30482181
关注
  • 1
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui--select使用以及下拉框实现键盘选择的例子
10-16
在本文中，我们将探讨如何使用layui框架来实现一个功能丰富的下拉选择框，包括键盘...通过理解layui的表单渲染机制和事件处理，我们可以轻松地实现这一功能，并将其与其他layui组件结合，创建出功能强大的前端界面。
Layui登录界面
04-15
1. **Layui登录界面**：Layui提供了现成的登录模板，可以通过简单的配置快速搭建美观的登录界面。这个界面通常包含用户名、密码输入框、登录按钮以及可能的验证码或记住我等选项。Layui的CSS和JS组件使得布局和样式...
使用Layui 框架，做的界面效果 及经验教训总结（mvc5+EF+layui）
weixin_45256588的博客
08-03 2324
转载自：https://www.cnblogs.com/for-easy-fast/p/12790507.html； 1. 登录界面 login.css body, html { height: 100%; } .layui-admin-login-header { padding: 20px; text-align: center; } .layui-admin-login-header h1 { color: #009688; .
layui-用户登录界面响应式动画模板
06-08
layui用户登录界面响应式动画模板基于layui-1.0.9制作，响应式设计，自适应分辨率，兼容PC端和移动端，动画背景，登录提示框动画效果。
【Layui】入门必看：登录注册界面搭建与功能开发解析
无法自律的人的博客
07-11 3336
Layui是一款面向前端开发者的轻量级JavaScript库，旨在简化网页开发过程。它提供了丰富的基础UI组件和常用的工具函数，使开发者可以更快速地构建出优秀的网页界面。Layui具备以下特点和功能：简洁易用：Layui的设计理念是简洁而易用，它提供了直观的API和简单的配置，使开发者可以更快速地上手并快速构建界面。模块化加载：Layui采用模块化的加载方式，每个功能都是以独立的模块形式存在，开发者可以根据自己的需求按需加载所需的模块，避免了不必要的资源浪费。基础UI组件。
layui搭建的php后台,使用layui框架搭建后台布局
weixin_42546361的博客
03-20 365
摘要：主要借助layui框架，方便实现后台的搭建。上传参数：layui.use('upload', function(){ var upload = layui.upload; //执行实例 var uploadInst = upl主要借助layui框架，方便实现后台的搭建。上传参数：layui.use('upload', function(){var upload = layui.u...
登录界面模板
m0_54088351的博客
08-09 269
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> <script src="layui/layui.js"&...
2023 Layui网站后台管理系统框架模板源码
01-30 941
Layui网站后台管理系统模板，DIV+CSS布局设计，响应式设计，自适应分辨率，兼容PC端和移动端，全套后台模板，包括登录、控制台、表单、用户组、权限配置等HTML后台模板页面。
layui-table 案例.rar
05-11
Layui-Table 的使用首先需要在页面中引入 Layui 的 CSS 和 JS 文件，以及 Table 组件的 JS 文件。在 HTML 结构中，通过 `<table class="layui-table"></table>` 创建一个基本的表格容器，然后通过 JavaScript 初始...
chat-layui:贤心 layui 即时聊天
04-28
4. **AJAX请求**：在用户登录、注册等涉及服务器交互的场景，"chat-layui"可能会用到XMLHttpRequest或fetch API来发送异步请求，获取服务器数据。 5. **数据解析与序列化**：JavaScript的JSON对象用于数据的序列化...
Layui实现数据表格默认全部显示(不要分页)
10-16
Layui是一款轻量级的前端UI框架，提供了丰富的组件，包括表格、按钮、表单等，方便开发者构建用户界面。在某些场景下，用户可能希望一次性查看所有数据，而不是通过分页来逐页浏览。以下是如何利用Layui实现这一功能...
layuiAdmin 框架单页面文档
肖明伟 的博客
08-29 3万+
快速入门 部署 解压文件后，将 layuiAdmin 完整放置在任意目录 通过本地 web 服务器去访问 ./start/index.html 即可运行 Demo 由于 layuiAdmin 可采用前后端分离开发模式，因此你无需将其放置在你的服务端 MVC 框架中，你只需要给 layuiAdmin 主入口页面（我们也称之为：宿主页面）进行访问解析，它即可全权完成自身路由的跳转和视图的呈现，而数...
php layui管理后台,cmlphp+layui通用后台管理系统 v1.0
weixin_33781072的博客
03-09 319
基于layui+cmlphp开发基础后台管理系统，提供用户权限管理、日志管理等基础模块。登录插件化。提供FormBuildServer和GridBuildServer。通过后端生成form表单及列表页面注意事项：下载后请修改projllnnzxleeggwsb/Config/common.php中的 auth_key的值如果不能将站点根目录配置到public下。安全起见请修改目录proj3e9xo...
layui实现与php数据请求table表格展示及分页跳转功能
weixin_39218464的博客
10-11 2497
前端代码index.php <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>layui在线
layuiadmin开发文档
热门推荐
hexiaoniao的博客
04-28 5万+
layuiAdmin pro v1.x 【单页版】开发者文档 更新日志常见问题在线演示会员专区切换到：iframe版文档 layuiAdmin pro （单页版）是完全基于 layui 架构而成的后台管理模板系统，可以更轻松地实现前后端分离，它是 mvc 的简化版，全面接管视图和页面路由，并可自主完成数据渲染，服务端通常只负责数据接口，而前端只需专注视图和事件交互，所有的...
基于Jfinal框架+layui实现的学生管理系统，包括用户登录邮箱找回密码
拾光博客
01-20 1648
### 学习心得 本人是一名在校大学生，才疏学浅，编程小白。学习了java基础知识后，想往java web方向发展，于是在网上找了很多资料，最后发现了Jfinal(jfinal官网)，刚刚接触框架开发，一点都不会，通过网上各种资料的学习，渐渐的开始上手。 回想之前自己动手写的一些java web小项目都是通过Servlet+mvc的形式进行开发，用jfinal好像发现了新大陆，jfin...
layui登录注册页面
最新发布
12-07
根据提供的引用内容，可以了解到Layui是一个非常流行的前端UI框架，可以用于快速搭建各种网站页面。下面是一个简单的Layui登录注册页面的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui登录注册页面</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script> </head> <body> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md6 layui-col-md-offset3"> <div class="layui-card"> <div class="layui-card-header">用户登录</div> <div class="layui-card-body"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="login">登录</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> </div> <div class="layui-card"> <div class="layui-card-header">用户注册</div> <div class="layui-card-body"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="register">注册</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> </div> </div> </div> </div> <script> //JavaScript代码区域 layui.use(['form', 'layer'], function(){ var form = layui.form; var layer = layui.layer; //监听登录提交 form.on('submit(login)', function(data){ layer.msg(JSON.stringify(data.field)); return false; }); //监听注册提交 form.on('submit(register)', function(data){ layer.msg(JSON.stringify(data.field)); return false; }); }); </script> </body> </html> ``` 这个示例代码包含了一个简单的登录和注册表单，使用了Layui的表单组件和弹出层组件。在JavaScript代码中，使用了Layui的form模块和layer模块来处理表单提交和弹出提示框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值