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文件添加可…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容：参考网站： PID算法控制 PID即：Proportional（比例）、Integral（积分&…...
2025年能源电力系统与流体力学国际会议 (EPSFD 2025)
2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包：import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序（自然排序和定制排序）Arrays.binarySearch()通过二分搜索法进行查找（前提：数组是…...
WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解，适合用作学习或写简历项目背景说明。 🧠 一、概念简介：Solidity 合约开发 Solidity 是一种专门为 以太坊（Ethereum）平台编写智能合约的高级编…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
python执行测试用例，allure报乱码且未成功生成报告
allure执行测试用例时显示乱码：‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA：通过低成本全身远程操作学习双手移动操作 传统模仿学习（Imitation Learning）缺点：聚焦与桌面操作，缺乏通用任务所需的移动性和灵活性 本论文优点：（1）在ALOHA…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享 文件木马：https://w…...
纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...