案例开发-日程管理-第一期
九 案例开发-日程管理-第一期
共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",&…...
小程序需要进行软件测试吗?小程序测试有哪些测试内容?
在如今移动互联网快速发展的时代，小程序已成为人们生活中不可或缺的一部分。然而，面对日益增长的小程序数量和用户需求，小程序的稳定性和质量问题日益突显。因此，对小程序进行软件测试显得尤为重要。 近期的一项调查显示…...
一文读懂企业租用GPU的注意事项！
在人工智能、大数据处理及高性能计算领域，GPU算力已成为推动技术创新与业务增长的核心动力。尚云Sunclouds作为GPU算力租赁服务提供商，为用户提供了灵活、高效且成本可控的解决方案。对于初次接触GPU算力租赁的用户而言，了解并掌握租用过程中…...
Linux运维：mysql主从复制原理及实验
当一台数据库服务器出现负载的情况下，需要扩展服务器服务器性能扩展方式有向上扩展，垂直扩展。向外扩展，横向扩展。通俗的讲垂直扩展是将一台服务器扩展为性能更强的服务器。横向扩展是增加几台服务器。 主从复制好比存了1000块钱在主上&…...
022-GeoGebra中级篇-几何对象之直线与坐标轴
本文主要介绍一下GeoGebra中直线的常见输入方式，比如工具栏输入、表达式输入、函数输入，最后再把坐标轴的调用简单介绍一下。内容比起传统的教学更偏向于实战一些，若感兴趣欢迎继续阅读。 目录 一、直线1. 关于工具栏绘制（1&#…...
node js安装、配置（Windows版）
目录 node js 安装 node js 全局配置 1、全局安装路径 2、全局缓存路径 3、修改环境变量 pnpm安装、卸载 全局安装pnpm 验证pnpm版本 卸载pnpm 1、移除全局安装的包 2、移除pnpm cli 脚本直接安装 npm安装的使用命令直接卸载 node js 安装 cmd 查看是否存在&…...
go语言day08 泛型 自定义错误处理 go关键字:协程
泛型： 抛错误异常 实现error接口类型 用java语言解释的话，实现类需要重写error类型的抽象方法Error().这样就可以自定义异常处理。 回到go语言，在Error()方法中用*argError 这样一个指针类来充当error接口的实现类。 在f2()方法中定义返回值…...
MySql性能调优01-[数据结构和索引]
数据结构和索引 什么是索引索引的种类常见索引数据结构和区别二叉树 红黑树 什么是索引 索引的种类 在Mysql中索引是在存储引擎层实现的，而不是在服务层实现的 按数据结构分：Btree索引、Hash索引、Full-text索引按存储结构分：聚簇索引、非聚…...
【算法入门-栈】逆波兰表达式求值
📖逆波兰表达式求值 ✅描述✅扩展：什么是逆波兰表达式✅题解方法一：栈✅题解方法二（数组模拟栈） 今天又刷了一道题，奥利给 刷题地址： 点击跳转 ✅描述 给定一个逆波兰表达式，求表达…...
【史上最全面ESP32教程】http通信
文章目录 前言HTTP协议是什么？HTTP协议的特点HTTP协议的常见应用 esp32 使用http通信通信流程基础使用HTTPClient 常用的函数函数介绍：void end(void);bool connected(void);void setReuse(bool reuse);void setUserAgent(const String& userAgent);…...
*算法训练（leetcode）第二十七天 | 56. 合并区间、738. 单调递增的数字、968. 监控二叉树
刷题记录 56. 合并区间*738. 单调递增的数字*968. 监控二叉树 56. 合并区间 leetcode题目地址 排序后遇到有重合的区间选择最大的区间保存即可，结果集中保存的是离当前区间最近的区间，因此使用当前区间与结果集中的最后一个集合比较查看是否有重合&…...
OpenJudge 奇数求和
目录 描述思路样例输入样例输出CodeCC 总时间限制: 1000ms 内存限制: 65536kB 描述 计算非负整数 m 到 n（包括m 和 n ）之间的所有奇数的和，其中，m 不大于 n，且n 不大于300。例如 m3, n12, 其和则为：357911…...
wordpress 后台打开慢/兰州网站seo服务
开发准备 第1步：准备好百度智能云的账号 第2步：在百度智能云领取对应AI开发的免费资源包 第3步：创建对应的应用，然后获取对应的开发信息，主要是下面几个 AppID：应用列表中 API Key：应用列表…...
有域名有空间如何做网站/网站建设优化
近期客服遇到一个问题，说看不到千牛聊天记录了，本来聊过的客户，打开对话框聊天记录显示的是空白的，点击历史聊天记录也是空白的。问我应该怎么解决，我梳理了一下解决的方法，希望能对大家有帮助。如图&#…...
岚山网站建设/外贸网站搭建推广
3巧记单词的方法二【方法一】稀里糊涂型平时英语课本上记一些，看美剧又记一些，考四六级之前再突击一下“要你命3000”之类的宝典，这些方法比较机械，也很难有组织、有规划地去记忆学习，不过大多数同学应该都是属于这种情…...
网站互动功能/焊工培训
弹性云服务器 ECS弹性云服务器(Elastic Cloud Server)是一种可随时自助获取、可弹性伸缩的云服务器，帮助用户打造可靠、安全、灵活、高效的应用环境，确保服务持久稳定运行，提升运维效率三年低至5折，多种配置可选了解详情什么是弹性…...
wordpress手机速度插件/湖南seo推广系统
1、SortedList定义 System.Collections.SortedList类表示键/值对的集合，这些键值对按键排序并可按照键和索引访问。SortedList 在内部维护两个数组以存储列表中的元素；即，一个数组用于键，另一个数组用于相关联的值。每个元素都是一…...
做app模板下载网站/seo查询百科
定义和用法 <audio> 标签定义声音，比如音乐或其他音频流。 示例代码:<audio src"someaudio.wav">您的浏览器不支持 audio 标签。</audio> 提示和注释 提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏…...