学生登录系统前端

最新推荐文章于 2023-03-02 09:43:46 发布
最新推荐文章于 2023-03-02 09:43:46 发布
阅读量405 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53762175/article/details/120522334
版权

（管理员系统登录入口）

 

（学生信息录入功能）

  1. 布局出如上图所示的登录页面
  2. 失焦验证用户名
    1. 由字母、数字、下划线组成且长度在5-8位
    2. 验证不通过在文本框后方给出红色字体提示
    3. 验证通过出现绿色“✅”
  3. 失焦验证密码
    1. 由字母开头、只能包含数字和字母组成且长度在5-10位
    2. 验证不通过在文本框后方给出红色字体提示
    3. 验证通过出现绿色“✅”

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jQuery-3.6.js"></script>
        <!-- 新 Bootstrap4 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    </head>
    <body>
        
        <div id="app" style="margin: 0 auto; width: 1000px;margin-top: 30px;">
             <h2>logo</h2>
            <form action="index_list.html" method="post" id="form">
                <div class="form-group">
                    <input type="text" class="form-control" id="username" placeholder="请输入账号" style="width: 300px;">
                    <span></span>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="password" placeholder="请输入密码" style="width: 300px;" >
                    <span></span>
                </div>
                <button type="submit"class="btn btn-primary" style="width: 150px;">登录</button>
                </div>
            </form>
    </body>
</html>

  1. 表单提交验证
    1. 如果用户名和密码未输入内容，点击登录按钮时则不执行验证登录信息的代码逻辑
    2. 如果用户名和密码输入内容但不符合规则，同样不可执行验证登录信息的代码逻辑
  2. 验证登录信息是否正确
    1. 定义两个变量，存储账号和密码，账号为：root、密码为：root666
    2. 获取输入的账号和密码，进行验证
      • 如果是用户名输入有误，则弹框形式弹出：“用户不存在”
      • 如果是密码输入有误，则弹框形式弹出：“密码输入有误”
      • 验证成功以弹框形式弹出：“登录成功”，之后跳转index_list.html（2分）
  3. 实现学生信息添加
    1. 布局添加表单
    2. 绑定点击事件
    3. 验证添加内容不可为空
    4. 验证通过后获取输入的内容添加至下方列表中的最后一行内
  4. 实现全不选、全选功能
    1. 序号前新增一列，实现选中功能
    2. 点击则全选列表所有数据，实现全选功能
    3. 再次点击则取消全选，实现全不选功能
  5. 实现列表删除功能
    1. 给删除按钮绑定事件
    2. 点击按钮时，弹出询问框，提示“你确定要删除吗？”
    3. 点击确定将该行数据在列表中删除
  6. 实现列表数据的批量删除
    1. 新增一个批量删除按钮
    2. 点击批量删除按钮时候，如果未勾选任何数据，则提示“请选择数据”
    3. 勾选数据后，点击批量删除，可以删除对应的多条勾选信息

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            input {
                margin-top: 10px;
            }

            select {
                margin-top: 10px;
            }

            button {
                margin-top: 10px;
            }

            .delete {
                cursor: pointer;
            }

            tr {
                text-align: center;
            }
        </style>
    </head>
    <body>
        姓名：<input type="text" name="name"><br>
        年龄：<input type="text" name="time"><br>
        性别：<select name="content" id="boxes">
               <option selected>男</option>
               <option selected>女</option>
        </select><br>
        手机：<input type="text" name="mobile"><br>
        <button type="button" class="but">创建新用户</button>
        <table border="1" class="table" width="500px" cellpadding="1" cellspacing="0">
            <tr style="background-color:red;">
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>手机</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>王磊</td>
                <td>男</td>
                <td>23</td>
                <td>1883078591</td>
                <td><span class="delete" οnclick="fun(this)">删除</span></td>
            </tr>
        </table>
    </body>
</html>

优秀的磊少
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端系统登录
02-23
电影电视 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint API通讯协定前端和外部API通讯协定 Link API com JWT 链接API com Sanctum
基于web的学生管理系统（三）前端页面
小皇的博客
11-27 3420
前端页面主要使用JSP 1、登录页面，index.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <head> <title>Title</title> <style>
前后端分离架构下的登录系统设计(v1)
Abysscarry的博客
06-12 1万+
背景： 最近项目的开发架构改为前后端分离模式； 前端采用vue框架npm编译后在tomcat独立部署，前后端完全通过http请求接口的方式进行交互，页面控制权交给前端，后端只提供页面所需数据而已！ 由此带来的主要问题就是登录系统如何设计？以前项目都是通过Shiro框架内部控制cookie、session、登陆状态、页面权限等一系列资源，现在前端页面脱离后端项目后，我们要做出哪些改变呢？ ...
JS+Java项目实战(1)--学生登录系统开发
程序员大阳
10-20 1424
前端使用HTML+CSS+JS，后端使用Java，数据库使用MySQL，实现学生登录功能。
1.SSM学生信息管理系统-登录界面以及实现
天才中年英俊的博客
08-21 5968
easyui比较流行好用的管理类的前端框架 新建一个登录页面 想要访问成功,犯了一个错误 说页面不存在, 结果一看 是路径我想当然的加上了jsp 应该写纯路径才对 ...
Javaweb学生管理系统（前端源码）
06-01
【JavaWeb学生管理系统前端源码详解】 JavaWeb学生管理系统是一个典型的Web应用实例，它结合了前端界面设计与后端业务逻辑处理，为用户提供了一个管理学生信息的平台。在这个系统中，前端部分主要负责用户交互，而...
学生宿舍管理系统（前端部分！）
06-23
总结来说，这个学生宿舍管理系统前端部分的实现涵盖了HTML内容构建、CSS样式设计、JavaScript交互逻辑、前后端数据通信以及代码的组织和安全防护等多个方面。通过这些技术的综合运用，才能创建出一个功能完善、用户...
基于vue的学生社团管理系统前端源码.rar
05-01
基于vue的学生社团管理系统前端源码 基于vue的学生社团管理系统前端源码 基于vue的学生社团管理系统前端源码 基于vue的学生社团管理系统前端源码 基于vue的学生社团管理系统前端源码 基于vue的学生社团管理系统...
学生信息管理系统的前端模板
最新发布
05-30
《学生信息管理系统的前端模板详解》 在信息技术日益发展的今天，学生信息管理系统已经成为了教育机构不可或缺的一部分。前端模板作为用户与系统交互的桥梁，其设计和实现至关重要。本篇文章将详细探讨“学生信息...
毕业设计学生宿舍管理系统前端.zip
05-22
毕业设计学生宿舍管理系统前端，采用前后端分离进行开发。主要功能包括宿舍管理，学生管理，设备保修，楼栋管理，分配宿舍，退寝管理等等。本系统一共有3个不同的账号角色，为管理员、学生、维修员，分别对应不同的...
教育网站通用登录页面html前端源码
mazai5080的博客
05-23 3640
大家好，今天给大家介绍一款， 简单的教育网站通用登录页面html前端源码（图1）。送给大家哦，获取方式在本文末尾。 图1 加入了输入验证（图2） 图2 响应式设计，适合各种分辨率（图3） 图3 代码完整，需要的朋友可以下载学习（图4） 图4 <!DOCTYPE HTML> <html lang="zxx"> <head> <title>Home</title> <!-- Meta-Tags -->
前端基础 用户信息校验
weixin_38039976的博客
01-26 921
项目总结 用户信息校验用户登录账号密码登录直接返回用户的ID使用加密的token使用sessionsession值放在localStorage和cookies的区别无感刷新使用JWT（Json Web Token）组成headerplayloadSignature 用户登录 账号密码登录 授权登录 账号密码登录 直接返回用户的ID 登陆后服务器返回用户Id,后续直接根据用户Id判断为该用户操作 这种方式直接暴露用户Id，如果id设计简单容易被推测所有用户的Id 使用加密的token 登陆后服务器返回md
学生注册平台html,安全教育平台登录注册
weixin_33196555的博客
06-03 1055
安全教育平台登录注册小编点评安全教育平台是一款提供安全素养防范危险教育软件。教育管理者可以在线查看安全教育开展情况，教师可以给家长定期发送安全提醒信息，学生可以便捷参与各项教育活动，获得优质教育内容。安全教育平台登录注册游戏亮点1、提供张掖当地的学子们完成网络在线课程学习，以及网络家庭作业的安全教育学习平台，通过这款学习平台将快速的掌握各项安全教育知识!2、拥有着全面的系统化学习方式让你在学习安全...
html5做学生信息表代码,html5 自定义验证信息(示例代码)
weixin_30106425的博客
06-03 997
h5 为表单新增了很多类型，及属性。根据这些新增的类型及属性h5也为我们提供了验证这些数据的js函数，这些验证表单的函数都存在了ValidityState对象中，接下来让我们一起来了解一下这些函数的用法：ValidityState对象ValidityState对象是通过validity 属性获取的，该对象有8个属性，分别针对8个方面的错误验证，属性值均为布尔值。1．valueMissing属性必填...
前端登陆功能
CaraYQ的博客
03-05 4442
标题手机扫码登陆pc端二维码app认证机制 手机扫码登陆pc端 原文 二维码 二维码的内容不止可以存数字，还可以存任何的字符串。我们可以认为，它就是字符的另外一种表现形式。 手机扫码这个过程，其实是对二维码的解码，获取二维码中包含的数据。 二维码包含什么：服务端必须给数据生成惟一的标识作为二维码ID，同时还应该设置二维码过期的时间。服务端也应该保存二维码的一些状态：未扫描、已成功、已失效。PC端根据二维码ID等数据生成二维码。 app认证机制 我们发现，只有装载APP，第一次登录的时候，才需要进行基于账号
html+css+js 学生信息管理系统
热门推荐
jinxiaofei8的博客
05-23 1万+
利用Web前端开发技术完成管理系统后台管理功能，主要包括用户登录、系统主界面
单点登录认证系统前端实现方案
weixin_45559449的博客
03-02 3097
单点登录（Single Sign On），简称SSO。是指在多个应用系统中，用户只需要登录一次，就可以访问所有相互信任的应用系统。采用OAuto2.0授权协议实现单点登录功能。本系统使用 Authorization Code（授权码模式）来获取 访问令牌 （access_token）系统说明统一身份认证平台用于业务系统登录，身份认证管理后台对集成单点登录的业务系统进行管理，包含业务系统注册、修改、注销等功能业务系统自身需要集成单点登录，可涉及多个业务系统统一身份认证平台。
学生信息注册html,学校管理网站前端页面bootstrap登录注册增删改查信息学生信息...
weixin_29190651的博客
06-04 1293
学校管理网站前端页面bootstrap登录注册增删改查信息学生信息学校管理网站：前端页面bootstrap、登录、注册、增删改查信息学生信息学生管理页面：登录、注册等功能源码地址：https://github.com/zninger0823/studentweb先上效果图：1.导航页2.首页3.注册页面4-0.学生页面5-0管理员页面简介：学生用户管理系统：学生登陆-------教师登录-----...
前端的短信验证码如何做（和后端配合）
jiang7701037的博客
01-25 1万+
前言 阅读本篇文章的要求：懂前端的HTML,CSS,Javascript，ajax；后端的php（或者其它编程语言也行）懂一点，数据库。 这篇文章写了四个小时，希望大家怀着一颗感恩的心阅读，谢谢！感谢您的点赞，让我有继续写下去的兴趣和勇气，谢谢！ 一、前提 申请短信服务：由于发送短信是需要电信行业的公司（中国电信，移动，联通等），所以，我们必须要和电信行业的公司去沟通。不过不要害怕，现在的社会服务很好，有很多的SP（服务提供商）帮你做好了此事。他们作为你和电信行业之间的桥梁，帮你做好了和电...
高校学生综合服务系统前端登录代码
05-18
以下是一个示例的高校学生综合服务系统前端登录代码： HTML代码： ``` <!DOCTYPE html> 高校学生综合服务系统 , initial-scale=1"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值