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文件添加可…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面，开源代码 作为一个电子罗盘模块，我们可以通过I2C从中获取偏航角yaw，相对于六轴陀螺仪的yaw，qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...
《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代，情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现，消费者对内容的“有感”程度，正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
cf2117E
原题链接：https://codeforces.com/contest/2117/problem/E 题目背景： 给定两个数组a,b，可以执行多次以下操作：选择 i (1 < i < n - 1)，并设置 或，也可以在执行上述操作前执行一次删除任意 和 。求…...
HBuilderX安装（uni-app和小程序开发）
下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤 运行安装程序： 双击下载的.exe安装文件 如果出现安全提示&…...
深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析：跨文件编程的终极指南 📅 更新时间：2025年6月5日 🏷️ 标签：C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么？&…...
【VLNs篇】07：NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战，克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
: 一刀斩断视频片头广告)
快刀集(1): 一刀斩断视频片头广告
一刀流：用一个简单脚本，秒杀视频片头广告，还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农，平时写代码之余看看电影、补补片，是再正常不过的事。 电影嘛，要沉浸，…...
解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist
现象： android studio报错： [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决： 不要动CMakeLists.…...