JavaWeb JavaScript 10.日程管理 第一期
自我消耗，敏感是我，
明媚是我，
我横跳在不同的情绪中
—— 24.8.31
一、登录页及校验
1.校验账号格式
// 校验账号格式function checkUsername(){// 定义正则表达式表示字符串规则var usernameReg = /^[a-zA-Z0-9]{5,10}$/;// 获取用户名输入框的值var usernameInput = document.getElementById("usernameInput");var username = usernameInput.value;// 获取提示信息元素var usernameMsg = document.getElementById("usernameMsg");// 判断用户名是否符合规则if(usernameReg.test(username)){// 符合规则，返回true，在页面上提示OKusernameMsg.innerText = "OK";return true;}else{// 不符合规则，显示提示信息usernameMsg.innerText = "用户名必须为5-10位字母、数字或下划线";// 格式有误时，返回false，阻止表单提交return false;}}2.校验密码格式
// 校验密码是否符合规则的函数function checkUserPwd(){// 定义正则表达式表示字符串规则var userPwdReg = /^[0-9]{6}$/;// 获取密码输入框的值var userPwdInput = document.getElementById("userPwdInput");var userPwd = userPwdInput.value;// 获得格式提示的框var userPwdMsg = document.getElementById("userPwdMsg");// 判断密码是否符合规则if(userPwdReg.test(userPwd)){// 符合规则，显示提示信息userPwdMsg.innerText = "OK";return true;}else{// 不符合规则，显示提示信息userPwdMsg.innerText = "用户名密码格式有误，密码必须是六位数字";return false;}}3.检验表单函数
// 校验表单函数function checkForm(){var flag1 = checkUsername();var flag2 = checkUserPwd();// 如果两个函数都返回true，说明格式都正确，可以提交表单return flag1 && flag2;}4.CSS样式
<style>.ht{text-align: center;color: cadetblue;font-family: 幼圆;}.tab{width: 500px;border: 5px solid cadetblue;margin: 0px auto;border-radius: 5px;font-family: 幼圆;}.ltr td{border: 1px solid powderblue;}.ipt{border: 0px;width: 50%;}.btn1{border: 2px solid powderblue;border-radius: 4px;width:60px;background-color: antiquewhite;}#usernameMsg , #userPwdMsg {color: gold}.buttonContainer{text-align: center;}</style>5.JavaScript代码
<script>// 校验账号格式function checkUsername(){// 定义正则表达式表示字符串规则var usernameReg = /^[a-zA-Z0-9]{5,10}$/;// 获取用户名输入框的值var usernameInput = document.getElementById("usernameInput");var username = usernameInput.value;// 获取提示信息元素var usernameMsg = document.getElementById("usernameMsg");// 判断用户名是否符合规则if(usernameReg.test(username)){// 符合规则，返回true，在页面上提示OKusernameMsg.innerText = "OK";return true;}else{// 不符合规则，显示提示信息usernameMsg.innerText = "用户名必须为5-10位字母、数字或下划线";// 格式有误时，返回false，阻止表单提交return false;}}// 校验密码是否符合规则的函数function checkUserPwd(){// 定义正则表达式表示字符串规则var userPwdReg = /^[0-9]{6}$/;// 获取密码输入框的值var userPwdInput = document.getElementById("userPwdInput");var userPwd = userPwdInput.value;// 获得格式提示的框var userPwdMsg = document.getElementById("userPwdMsg");// 判断密码是否符合规则if(userPwdReg.test(userPwd)){// 符合规则，显示提示信息userPwdMsg.innerText = "OK";return true;}else{// 不符合规则，显示提示信息userPwdMsg.innerText = "用户名密码格式有误，密码必须是六位数字";return false;}}// 校验表单函数function checkForm(){var flag1 = checkUsername();var flag2 = checkUserPwd();// 如果两个函数都返回true，说明格式都正确，可以提交表单return flag1 && flag2;}</script>6.整体代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.ht{text-align: center;color: cadetblue;font-family: 幼圆;}.tab{width: 500px;border: 5px solid cadetblue;margin: 0px auto;border-radius: 5px;font-family: 幼圆;}.ltr td{border: 1px solid powderblue;}.ipt{border: 0px;width: 50%;}.btn1{border: 2px solid powderblue;border-radius: 4px;width:60px;background-color: antiquewhite;}#usernameMsg , #userPwdMsg {color: gold}.buttonContainer{text-align: center;}</style><script>// 校验账号格式function checkUsername(){// 定义正则表达式表示字符串规则var usernameReg = /^[a-zA-Z0-9]{5,10}$/;// 获取用户名输入框的值var usernameInput = document.getElementById("usernameInput");var username = usernameInput.value;// 获取提示信息元素var usernameMsg = document.getElementById("usernameMsg");// 判断用户名是否符合规则if(usernameReg.test(username)){// 符合规则，返回true，在页面上提示OKusernameMsg.innerText = "OK";return true;}else{// 不符合规则，显示提示信息usernameMsg.innerText = "用户名必须为5-10位字母、数字或下划线";// 格式有误时，返回false，阻止表单提交return false;}}// 校验密码是否符合规则的函数function checkUserPwd(){// 定义正则表达式表示字符串规则var userPwdReg = /^[0-9]{6}$/;// 获取密码输入框的值var userPwdInput = document.getElementById("userPwdInput");var userPwd = userPwdInput.value;// 获得格式提示的框var userPwdMsg = document.getElementById("userPwdMsg");// 判断密码是否符合规则if(userPwdReg.test(userPwd)){// 符合规则，显示提示信息userPwdMsg.innerText = "OK";return true;}else{// 不符合规则，显示提示信息userPwdMsg.innerText = "用户名密码格式有误，密码必须是六位数字";return false;}}// 校验表单函数function checkForm(){var flag1 = checkUsername();var flag2 = checkUserPwd();// 如果两个函数都返回true，说明格式都正确，可以提交表单return flag1 && flag2;}</script>
</head>
<body><h1 class="ht">欢迎使用日程管理系统</h1><h3 class="ht">请登录</h3><form method="post" action="/user/login" onsubmit="return checkForm()"><table class="tab" cellspacing="0px"><tr class="ltr"><td>请输入账号</td><td><input class="ipt" type="text" id="usernameInput" name="username" onblur="checkUsername()"><span id="usernameMsg" class="=msg"></span></td></tr><tr class="ltr"><td>请输入密码</td><td><input class="ipt" type="password" name="userPwd" id="userPwdInput" onblur="checkUserPwd()"><span id="userPwdMsg"></span></td></tr><tr class="ltr"><td colspan="2" class="buttonContainer"><input class="btn1" type="submit" value="登录"><input class="btn1" type="reset" value="重置"><button class="btn1"><a href="regist.html">去注册</a></button></td></tr></table></form>
</body>
</html>7.效果展示
二、注册页及校验
1.校验账号格式
// 验证账号格式function checkUsername(){var usernameReg = /^[a-zA-Z0-9]{5,10}$/;var usernameInput = document.getElementById("usernameInput") ;var username = usernameInput.value;var usernameMsg = document.getElementById("usernameMsg");if(!usernameReg.test(username)){usernameMsg.innerText = "账号格式不正确";return false;}else{usernameMsg.innerText = "OK";return true;}}2.校验密码格式
// 验证密码格式function checkUserPwd(){var userPwdReg = /^\d{6}$/;// 获取密码输入框的值var userPwdInput = document.getElementById("userPwdInput")var userPwd = userPwdInput.value;// 获取密码提示信息var userPwdMsg = document.getElementById("userPwdMsg");if(!userPwdReg.test(userPwd)){userPwdMsg.innerText = "账号格式不正确";return false;}else{// 符合规则，打印提示信息userPwdMsg.innerText = "OK";return true;}}3.校验确认密码格式
// 验证确认密码function checkReUserPwd(){// 密码格式验证var userPwdReg = /^\d{6}$/;// 再次输入的密码var reUserPwdInput = document.getElementById("reUserPwdInput")var reUserPwd = reUserPwdInput.value;var reUserPwdMsg = document.getElementById("reUserPwdMsg");if(!userPwdReg.test(reUserPwd)){reUserPwdMsg.innerText = "密码格式不正确";return false;}// 获得上次输入的密码var userPwdInput = document.getElementById("userPwdInput")var userPwd = userPwdInput.value;// 判断两次输入的密码是否一致if(reUserPwd != userPwd){reUserPwdMsg.innerText = "两次输入的密码不一致";return false;}else{reUserPwdMsg.innerText = "OK";return true;}}4.验证表单函数
// 验证表单函数function checkForm(){var flag1 = checkUsername();var flag2 = checkUserPwd();var flag3 = checkReUserPwd();return flag1 && flag2 && flag3;}5.CSS样式
<style>.ht{text-align: center;color:cadetblue;font-family: 幼圆;}.tab{width: 500px;border: 5px solid cadetblue;margin: 0px auto;border-radius: 5px;font-family: 幼圆;}.ltr td{border: 1px solid powderblue;}.ipt{bottom: 0px;width: 50%;}.btn1{border: 2px solid powderblue;border-radius: 4px;width: 60px;background: antiquewhite;}.msg{color: gold;}.buttonContainer{text-align: center;}</style>6.JavaScript代码
<script>// 验证账号格式function checkUsername(){var usernameReg = /^[a-zA-Z0-9]{5,10}$/;var usernameInput = document.getElementById("usernameInput") ;var username = usernameInput.value;var usernameMsg = document.getElementById("usernameMsg");if(!usernameReg.test(username)){usernameMsg.innerText = "账号格式不正确";return false;}else{usernameMsg.innerText = "OK";return true;}}// 验证密码格式function checkUserPwd(){var userPwdReg = /^\d{6}$/;// 获取密码输入框的值var userPwdInput = document.getElementById("userPwdInput")var userPwd = userPwdInput.value;// 获取密码提示信息var userPwdMsg = document.getElementById("userPwdMsg");if(!userPwdReg.test(userPwd)){userPwdMsg.innerText = "账号格式不正确";return false;}else{// 符合规则，打印提示信息userPwdMsg.innerText = "OK";return true;}}// 验证确认密码function checkReUserPwd(){// 密码格式验证var userPwdReg = /^\d{6}$/;// 再次输入的密码var reUserPwdInput = document.getElementById("reUserPwdInput")var reUserPwd = reUserPwdInput.value;var reUserPwdMsg = document.getElementById("reUserPwdMsg");if(!userPwdReg.test(reUserPwd)){reUserPwdMsg.innerText = "密码格式不正确";return false;}// 获得上次输入的密码var userPwdInput = document.getElementById("userPwdInput")var userPwd = userPwdInput.value;// 判断两次输入的密码是否一致if(reUserPwd != userPwd){reUserPwdMsg.innerText = "两次输入的密码不一致";return false;}else{reUserPwdMsg.innerText = "OK";return true;}}// 验证表单函数function checkForm(){var flag1 = checkUsername();var flag2 = checkUserPwd();var flag3 = checkReUserPwd();return flag1 && flag2 && flag3;}</script>7.整体代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.ht{text-align: center;color:cadetblue;font-family: 幼圆;}.tab{width: 500px;border: 5px solid cadetblue;margin: 0px auto;border-radius: 5px;font-family: 幼圆;}.ltr td{border: 1px solid powderblue;}.ipt{bottom: 0px;width: 50%;}.btn1{border: 2px solid powderblue;border-radius: 4px;width: 60px;background: antiquewhite;}.msg{color: gold;}.buttonContainer{text-align: center;}</style><script>// 验证账号格式function checkUsername(){var usernameReg = /^[a-zA-Z0-9]{5,10}$/;var usernameInput = document.getElementById("usernameInput") ;var username = usernameInput.value;var usernameMsg = document.getElementById("usernameMsg");if(!usernameReg.test(username)){usernameMsg.innerText = "账号格式不正确";return false;}else{usernameMsg.innerText = "OK";return true;}}// 验证密码格式function checkUserPwd(){var userPwdReg = /^\d{6}$/;// 获取密码输入框的值var userPwdInput = document.getElementById("userPwdInput")var userPwd = userPwdInput.value;// 获取密码提示信息var userPwdMsg = document.getElementById("userPwdMsg");if(!userPwdReg.test(userPwd)){userPwdMsg.innerText = "账号格式不正确";return false;}else{// 符合规则，打印提示信息userPwdMsg.innerText = "OK";return true;}}// 验证确认密码function checkReUserPwd(){// 密码格式验证var userPwdReg = /^\d{6}$/;// 再次输入的密码var reUserPwdInput = document.getElementById("reUserPwdInput")var reUserPwd = reUserPwdInput.value;var reUserPwdMsg = document.getElementById("reUserPwdMsg");if(!userPwdReg.test(reUserPwd)){reUserPwdMsg.innerText = "密码格式不正确";return false;}// 获得上次输入的密码var userPwdInput = document.getElementById("userPwdInput")var userPwd = userPwdInput.value;// 判断两次输入的密码是否一致if(reUserPwd != userPwd){reUserPwdMsg.innerText = "两次输入的密码不一致";return false;}else{reUserPwdMsg.innerText = "OK";return true;}}// 验证表单函数function checkForm(){var flag1 = checkUsername();var flag2 = checkUserPwd();var flag3 = checkReUserPwd();return flag1 && flag2 && flag3;}</script>
</head>
<body><h1 class="ht">欢迎使用日程管理系统</h1><h3 class="ht">请注册</h3><form method="post" action="/user/regist" onsubmit="return checkForm()"><table class="tab" cellspacing="0px"><tr class="ltr"><td>请输入账号</td><td><input class="ipt" type="text" name="username" id="usernameInput" onblur="checkUsername()"><span id="usernameMsg" class="msg"></span></td></tr><tr class="ltr"><td>请输入密码</td><td><input class="ipt" type="password" name="userPwd" id="userPwdInput" onblur="checkUserPwd()"><span id="userPwdMsg" class="msg"></span></td></tr><tr class="ltr"><td>确认密码</td><td><input type="password" class="ipt" id="reUserPwdInput" onblur="checkReUserPwd()"><span id="reUserPwdMsg" class="msg"></span></td></tr><tr class="ltr"><td colspan="2" class="buttonContainer"><input type="submit" class="btn1" value="注册"><input type="reset" class="btn1" value="重置"><button class="btn1"><a href="login.html">去登陆</a></button></td></tr></table></form>
</body>
</html>8.效果展示
相关文章：
JavaWeb JavaScript 10.日程管理 第一期
自我消耗，敏感是我， 明媚是我， 我横跳在不同的情绪中 —— 24.8.31 一、登录页及校验 1.校验账号格式 // 校验账号格式function checkUsername(){// 定义正则表达式表示字符串规则var usernameReg /^[a-zA-Z0-9]{5,10}$/;// 获取用户名输入…...
redis为什么快
春内存访问，相比数据库访问磁盘要快单线程，避免上下文切换带来的cpu开销渐进式Rehash。减少阻塞网络模型多路复用，reactor模型 常用基本数据类型 5个基本数据类型2个高级数据结构（bitmaps、hyperlog） redis高级功能…...
 部署SpringBoot3.0)
十分钟学会Kubernetes(K8S) 部署SpringBoot3.0
1、十分钟学会Kubernetes(K8S) 部署SpringBoot3.0 本课程以 Java 后端开发的视角，带着大家从零基础入门 k8s 实战，掌握企业级容器化管理平台的各种实战应用，以及 Prometheus 监控告警、ELK 日志收集、DevOps 等众多实战课程内容，大…...
顺序表的插入与删除
一.插入：插入前先移动后面的元素 1.图解： 在b和d之间插入c，此时就需要把d，e，f都向后移一位，腾出一个位置后插入c。 2.代码实现： #include<stdio.h> #define MaxSize 10 //定义最大长度…...
FFMPEG -- 音频开发
1：前言 在进行音频开发之前需要先知道一些基础知识，一些有必要的指导的概念。 1.1 声音的产生、获取和转换 声音的产生的本质是靠震动，声音的传播需要借助媒介，比如空气、液体、固体等媒介。在自然界中声音的可视化为音波的形式&…...
lxml官方入门教程（The lxml.etree Tutorial）翻译
lxml官方入门教程（The lxml.etree Tutorial）翻译 说明： 首次发表日期：2024-09-05官方教程链接： https://lxml.de/tutorial.html使用KIMI和豆包机翻水平有限，如有错误请不吝指出 这是一个关于使用lxml.et…...
string详解
Golang详解string 文章目录 Golang详解stringGolang中为什么string是只读的？stirng和[]byte的转化原理[]byte转string一定需要内存拷贝吗？字符串拼接性能测试 Golang中为什么string是只读的？ 在Go语言中，string其实就是一个结构体…...
基于约束大于规范的想法，封装缓存组件
架构？何谓架构？好像并没有一个准确的概念。以前我觉得架构就是搭出一套完美的框架，可以让其他开发人员减少不必要的代码开发量；可以完美地实现高内聚低耦合的准则;可以尽可能地实现用最少的硬件资源，实现最高的程序效率…...
自动化测试面试真题（附答案）
一、编程语法题 1 、 python 有哪些数据类型 python 数据类型有很多，基本数据类型有整型（数字）、字符串、元组、列表、字典和布尔类型等 2 、怎么将两个字典合并 调用字典的 update 方法，合并 2 个字典。 3 、 json.l python …...
云原生架构概念
云原生架构概念 云原生架构（Cloud Native Architechtrue）作为一种现代软件开发的革新力量，正在逐渐改变企业构建、部署和管理应用程序的方式。它的核心优势在于支持微服务架构，使得应用程序能够分解为独立、松耦合的服务…...
85、 探针
一、pod的进阶 pod的进阶： 1.1、pod的生命周期当中的状态： 1、Running运行中，pod已经分配到节点上且pod内的容器正常运行。正常状态（ready 1/1）。 2、complete：完成之后退出，容器内的返回码…...
2024全国大学省数学建模竞赛A题-原创参考论文（部分+第一问代码）
一问题重述 1.1 问题背景 "板凳龙"，又称"盘龙"，是浙闽地区的传统地方民俗文化活动。这种独特的表演艺术形式融合了中国传统龙舞的精髓和地方特色，展现了人们对美好生活的向往和对传统文化的传承。 在板凳龙表演中&am…...
在VScode上写网页（html）
一、首先点进VScode，下载3个插件。 VScode安装：VScode 教程 | 菜鸟教程 二、新建 HTML 文件 作者运行的代码来自：http://t.csdnimg.cn/vIAQi 把代码复制粘贴进去，然后点击文件→另存为→选择html格式。 三、运行代码...
C#中LINQ的Cast＜T＞与OfType＜T＞
在C#中，Cast() 方法是LINQ（Language Integrated Query）的一部分，它位于 System.Linq 命名空间中。这个方法用于将 IEnumerable 集合（或任何实现了 IEnumerable 接口的集合）的元素转换为指定类型 T 的集合。…...
小阿轩yx-Kubernertes日志收集
小阿轩yx-Kubernertes日志收集 前言 在 Kubernetes 集群中如何通过不同的技术栈收集容器的日志，包括程序直接输出到控制台日志、自定义文件日志等 有哪些日志需要收集 日志收集与分析很重要，为了更加方便的处理异常 简单总结一些比较重要的需要收集…...
0to1使用Redis实现“登录验证”次数限制
1 引言 系统为了避免密码遭到暴力破解，通常情况下需要在登录时，限制用户验证账号密码的次数，当达到一定的验证次数后，在一段时间内锁定该账号，不再验证。本章将用几行代码实现该功能，完整代码链接在文章最…...
ARM----时钟
时钟频率可以是由晶振提供的，我们需要高频率，但是外部接高的晶振会不稳定，所有使用PLL（锁相环）来放大频率。接下来就让我们学习用外部晶振提供的频率来配置时钟频率。 一.时钟源的选择 在这里我们选择外部晶振作为时钟…...
NISP 一级 —— 考证笔记合集
该笔记为导航目录，在接下来一段事件内，我会每天发布我关于考取该证书的相关笔记。 当更新完成后，此条注释会被删除。 第一章 信息安全概述 1.1 信息与信息安全1.2 信息安全威胁1.3 信息安全发展阶段与形式1.4 信息安全保障1.5 信息系统安全保…...
C++三位状态比较排序
数组相同元素个数及按序 void 交换3个数升(int& A, int& B, int& C, bool& k) {int J 0;if (B > A&&A > C)J C, C B, B A, A J, k true;//231else if (C > A&&A > B)J A, A B, B J, k true;//213else if (A > B&a…...
麒麟系统安装GPU驱动
1.nvidia 1.1显卡驱动 本机显卡型号:nvidia rtx 3090 1.1.1下载驱动 打开 https://www.nvidia.cn/geforce/drivers/ 也可以直接使用下面这个地址下载 https://www.nvidia.com/download/driverResults.aspx/205464/en-us/ 1.1.3安装驱动 右击，为run文件添加可…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，百货中心供应链管理系统被用户普遍使用，为方…...
【Oracle APEX开发小技巧12】
有如下需求： 有一个问题反馈页面，要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据，方便管理员及时处理反馈。 我的方法：直接将逻辑写在SQL中，这样可以直接在页面展示 完整代码： SELECTSF.FE…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能，包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
【单片机期末】单片机系统设计
主要内容：系统状态机，系统时基，系统需求分析，系统构建，系统状态流图 一、题目要求 二、绘制系统状态流图 题目：根据上述描述绘制系统状态流图，注明状态转移条件及方向。 三、利用定时器产生时…...
大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型（LLM）参数规模的增长，推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长，而KV缓存的内存消耗可能高达数十GB（例如Llama2-7B处理100K token时需50GB内存&a…...
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习） 一、Aspose.PDF 简介二、说明（⚠️仅供学习与研究使用）三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
算法：模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣（LeetCode） 遍历字符串：通过外层循环逐一检查每个字符。遇到 ? 时处理： 内层循环遍历小写字母（a 到 z）。对每个字母检查是否满足： 与…...
Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明：这是一个机器学习实战项目（附带数据代码文档），如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下，风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？
现有的 Redis 分布式锁库（如 Redisson）相比于开发者自己基于 Redis 命令（如 SETNX, EXPIRE, DEL）手动实现分布式锁，提供了巨大的便利性和健壮性。主要体现在以下几个方面： 原子性保证 (Atomicity)ÿ…...
基于Springboot+Vue的办公管理系统
角色： 管理员、员工 技术： 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能： 该办公管理系统是一个综合性的企业内部管理平台，旨在提升企业运营效率和员工管理水…...