案例开发-日程管理-第一期
九 案例开发-日程管理-第一期
共7期
9.1 登录页及校验
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</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: rgb(230, 87, 51);}.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")// 格式有误时,返回false,在页面上提示if(!usernameReg.test(username)){ usernameMsg.innerText="用户名格式有误"return false}// 格式OK,返回true 在页面上提示OKusernameMsg.innerText="OK"return true}// 检验密码格式是否合法的函数function checkUserPwd(){// 定义正则表示字符串的规则var userPwdReg= /^[0-9]{6}$/// 获得用户在页面上输入的信息var userPwdInput =document.getElementById("userPwdInput")var userPwd = userPwdInput.value// 获得格式提示的框var userPwdMsg =document.getElementById("userPwdMsg")// 格式有误时,返回false,在页面上提示if(!userPwdReg.test(userPwd)){ userPwdMsg.innerText="密码必须是6位数字"return false}// 格式OK,返回true 在页面上提示OKuserPwdMsg.innerText="OK"return true}// 表单在提交时,校验用户名和密码格式,格式OK才会提交function checkForm(){var flag1 =checkUsername()var flag2 =checkUserPwd()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"></span></td></tr><tr class="ltr"><td>请输入密码</td><td><input class="ipt" type="password" id="userPwdInput" name="userPwd" 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>
9.2 注册页及校验
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</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;}.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} 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} 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} 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" id="usernameInput" type="text" name="username" onblur="checkUsername()"><span id="usernameMsg" class="msg"></span></td></tr><tr class="ltr"><td>请输入密码</td><td><input class="ipt" id="userPwdInput" type="password" name="userPwd" onblur="checkUserPwd()"><span id="userPwdMsg" class="msg"></span></td></tr><tr class="ltr"><td>确认密码</td><td><input class="ipt" id="reUserPwdInput" type="password" onblur="checkReUserPwd()"><span id="reUserPwdMsg" class="msg"></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="login.html">去登录</a></button></td></tr></table></form>
</body>
</html>
相关文章：
案例开发-日程管理-第一期
九 案例开发-日程管理-第一期 共7期 9.1 登录页及校验 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style>.ht{text-align: center;color: cadetblue;font-family: 幼…...
【Java 注解，自定义注解，元注解，注解本质，注解解析】
文章目录 什么是注解？Java内置注解自定义注解元注解注解的本质注解解析 什么是注解？ 注解是Java编程语言中的一种元数据，提供了有关程序的额外信息。注解以符号开始，紧跟着注解的名称和一对括号，括号内包含注解的参数…...
染色法判定二分图
什么是二分图？ 二分图，也称作二部图，是图论中的一种特殊模型。在一个无向图G(V,E) 中，如果顶点集合 V 可以被分割成两个互不相交的子集 A 和 B，并且图中的每条边 (i,j) 关联的两个顶点 i 和 j 分别属于这两个不同的顶…...
自动气象站的主要功能优势
在科技日新月异的今天，我们生活的方方面面都受到了科技的影响。其中，自动气象站作为气象观测领域的重要一环，不仅提升了气象数据的准确性和时效性，还为我们的日常生活、农业生产、灾害预防等提供了重要的数据支持。 自动气象站概述…...
Java中实现二维数组（矩阵）的转置
在矩阵运算中，矩阵的转置是一个基本操作，即将矩阵的行变成列，列变成行。在Java中，我们可以通过编写一个方法来实现二维数组的转置。下面，我将详细介绍如何在Java中完成这一任务，并提供完整的代码示例。 编…...
Prometheus+Grafana主机运行数据
目录 介绍 安装Node Exporter 配置Prometheus 验证配置 导入仪表盘 介绍 Prometheus是一款开源的监控和警报工具，而Node Exporter是Prometheus的一个官方插件，用于采集主机上的各种系统和硬件指标。 安装Node Exporter 下载最新版本的Node Export…...
GraphQL在Postman中：释放API查询的强大潜能
🚀 GraphQL在Postman中：释放API查询的强大潜能 Postman作为API开发和测试的领先工具，对GraphQL的支持为开发者提供了一种新的方式来查询和管理数据。GraphQL是一种查询语言，用于API，允许客户端明确指定他们需要哪些数…...
大语言模型里的微调vs RAG vs 模板提示词
文章目录 介绍微调（Fine-tuning）定义优点：缺点：应用场景：技术细节 检索增强生成（RAG，Retrieval-Augmented Generation）定义优点：缺点：应用场景：技…...
网络编程：常用网络测试工具
telnet netstat ping arp wireshark（网络抓包工具） tcpdumpssh2 secure crt ——软件工具sudo ufw disable sudo apt-get install openssh-server openssh-client //两个命令敲完 得重启sudo apt-get install wireshark 1、telnet 远程登录工具&…...
mov视频怎么改成mp4？把mov改成MP4的四个方法
mov视频怎么改成mp4？选择合适的视频格式对于确保内容质量和流通性至关重要。尽管苹果公司的mov格式因其出色的视频表现备受赞誉，但在某些情况下，它并非最佳选择，因为使用mov格式可能面临一些挑战。MP4格式在各种设备（如…...
力扣1472.设计浏览器历史记录
力扣1472.设计浏览器历史记录 用双指针记录历史记录 以及栈顶高度移动时会直接把之前的记录消掉 class BrowserHistory {int pos-1;int top0;string history[5010];public:BrowserHistory(string homepage) {visit(homepage);}void visit(string url) {pos ;top pos;histor…...
准大一新生开学千万要带证件照用途大揭秘
1、提前关注好都有哪些考场，以及这些考场大致在网页的哪个位置。比如我选对外经贸大学，我就直接找到第二个点进去。 2、电脑上同时开了谷歌浏览器和IE浏览器，以及手机也登陆了。亲测下来，同一时间刷新，谷歌浏览器能显示…...
QImage显示图片像素
在Qt中，QImage 类是用来表示和处理图像的。如果你想查看或显示一个图片的像素数据，你可以使用 QImage 提供的方法来访问这些数据。以下是一些基本的方法来获取和显示图片的像素信息： 获取图像的像素格式： 使用 QImage::format() …...
uniapp使用高德地图（公众号+h5）
选择微信小程序的话后果就是你的地图出不来，出来了就报key异常 下面直接放配置和代码： 打包后的高德uni-app,uniCloud,serverless,高德地图,申请高德地图Key,配置使用高德地图,参数说明,高德开放平台用户名,百度地图,申请百度地图Key,配置使用百度地图,…...
深度学习与浅层学习：技术变革下的竞争态势
深度学习与浅层学习：技术变革下的竞争态势 在过去十年中，深度学习的崛起对整个人工智能领域产生了巨大影响，几乎在各种任务中显示出超越传统浅层学习方法的性能。这种变化不仅推动了技术的进步，还对硬件市场，尤其是显…...
LeetCode 219. 存在重复元素 II
LeetCode 219. 存在重复元素 II 给你一个整数数组 nums 和一个整数 k ，判断数组中是否存在两个 不同的索引 i 和 j ，满足 nums[i] nums[j] 且 abs(i - j) < k 。如果存在，返回 true ；否则，返回 false 。 示例 1&am…...
【目标检测】使用自己的数据集训练并预测yolov8模型
1、下载yolov8的官方代码 地址： GitHub - ultralytics/ultralytics: NEW - YOLOv8 🚀 in PyTorch > ONNX > OpenVINO > CoreML > TFLite 2、下载目标检测的训练权重 yolov8n.pt 将 yolov8n.pt 放在ultralytics文件夹下 3、数据集分布 注…...
应用监控SkyWalking调研
参考： 链路追踪( Skyworking )_skywalking-CSDN博客 企业级监控项目Skywalking详细介绍，来看看呀-CSDN博客 SkyWalking 极简入门 | Apache SkyWalking 使用 SkyWalking 监控 ClickHouse Server | Apache SkyWalking https://zhuanlan.zhihu.com/p/3…...
Selenium使用注意事项:
find_element 和 find_elements 的区别 WebDriver和WebElement的区别 问题： 会遇到报错： selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector",&…...
小程序需要进行软件测试吗?小程序测试有哪些测试内容?
在如今移动互联网快速发展的时代，小程序已成为人们生活中不可或缺的一部分。然而，面对日益增长的小程序数量和用户需求，小程序的稳定性和质量问题日益突显。因此，对小程序进行软件测试显得尤为重要。 近期的一项调查显示…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
)
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎（Physics Engine） 物理引擎 是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于 游戏开发、动画制作、虚…...
高危文件识别的常用算法：原理、应用与企业场景
高危文件识别的常用算法：原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件，如包含恶意代码、敏感数据或欺诈内容的文档，在企业协同办公环境中（如Teams、Google Workspace）尤为重要。结合大模型技术&…...
AI编程--插件对比分析：CodeRider、GitHub Copilot及其他
AI编程插件对比分析：CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展，AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者，分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
)
OpenLayers 分屏对比(地图联动)
注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能，和卷帘图层不一样的是，分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
selenium学习实战【Python爬虫】
selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...
是否存在路径（FIFOBB算法）
题目描述 一个具有 n 个顶点e条边的无向图，该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序，确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数，分别表示n 和 e 的值（1…...
python执行测试用例，allure报乱码且未成功生成报告
allure执行测试用例时显示乱码：‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...