案例开发-日程管理-第一期

九 案例开发-日程管理-第一期

共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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/373985.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

FPGA程序设计

FPGA程序设计

在设计FPGA时&#xff0c;多运用模块化的思想取设计模块&#xff0c;将某一功能设计成module。 设计之前要先画一下模块设计图&#xff0c;列出输入输出接口&#xff0c;再进一步设计内部功能。 状态机要画图&#xff0c;确定每个状态和状态之间怎么切换。状态用localparam定…
阅读更多...
IEC62056标准体系简介-4.IEC62056-53 COSEM应用层

IEC62056标准体系简介-4.IEC62056-53 COSEM应用层

为在通信介质中传输COSEM对象模型&#xff0c;IEC62056参照OSI参考模型&#xff0c;制定了简化的三层通信模型&#xff0c;包括应用层、数据链路层&#xff08;或中间协议层&#xff09;和物理层&#xff0c;如图6所示。COSEM应用层完成对COSEM对象的属性和方法的访问&#xff…
阅读更多...
查看oracle ojdbc所支持的JDBC驱动版本

查看oracle ojdbc所支持的JDBC驱动版本

oracle jcbc驱动的下载地址参考&#xff1a;JDBC and UCP Downloads page 其实上文中对ojdbc所支持的JDBC驱动版本已经有说明了&#xff0c;不过&#xff0c;因为oracle的驱动包很多时间&#xff0c;都是在公司内部私服里上传维护的&#xff0c;上传的时候&#xff0c;可能又没…
阅读更多...
skywalking-1-服务端安装

skywalking-1-服务端安装

skywalking很优秀。 安装服务端 skywalking的服务端主要是aop服务&#xff0c;为了方便查看使用还需要安装ui。另外采集的数据我们肯定要存起来&#xff0c;这个数据库就直接用官方的banyandb。也就是aop、ui、banyandb都使用官方包。 我们的目的是快速使用和体验&#xff0c…
阅读更多...
Java中的类与对象

Java中的类与对象

一、类 定义&#xff1a;对具有相同特征的这一类事物所进行的抽象描述 比如&#xff1a;人类 二、对象&#xff08;实例&#xff09; 定义&#xff1a;实际存在的该类事物的具体个体 比如&#xff1a;张三 三、定义类 编程是对现实生活中事物的体现&#xff0c;是对现实…
阅读更多...
大语言模型里的微调vs RAG vs 模板提示词

大语言模型里的微调vs RAG vs 模板提示词

文章目录 介绍微调&#xff08;Fine-tuning&#xff09;定义优点&#xff1a;缺点&#xff1a;应用场景&#xff1a;技术细节 检索增强生成&#xff08;RAG&#xff0c;Retrieval-Augmented Generation&#xff09;定义优点&#xff1a;缺点&#xff1a;应用场景&#xff1a;技…
阅读更多...
【Windows】实现窗口子类化（基于远程线程注入）

【Windows】实现窗口子类化（基于远程线程注入）

目录 前言 原理解释 完整项目 相关文献 文章出处链接&#xff1a;[https://blog.csdn.net/qq_59075481/article/details/140334106] 前言 众所周知&#xff0c;DLL 注入有多种用途&#xff0c;如热修补、日志记录、子类化等。本文重点介绍使用 DLL 注入对窗口进行子类化。…
阅读更多...
vue3 antdv Modal通过设置内容里的容器的最小高度，让Modal能够适当的变高一些

vue3 antdv Modal通过设置内容里的容器的最小高度，让Modal能够适当的变高一些

1、当收款信息Collapse也折叠的时候&#xff0c;我们会发现Modal的高度也变成了很小。 2、我们希望高度稍微要高一些&#xff0c;这样感觉上面显示的Modal高度太小了&#xff0c;显示下面的效果。 3、初始的时候&#xff0c;想通过class或者style或者wrapClassName来实现&#…
阅读更多...
SCSA第四天

SCSA第四天

ASPF FTP --- 文件传输协议 Tftp --- 简单文件传输协议 FTP协议相较于Tftp协议 ---- 1&#xff0c;需要进行认证 2&#xff0c;拥有一套完整的命令集 用户认证 防火墙管理员认证 ---- 校验登录者身份合法性 用户认证 --- 上网行为管理中的一环 上网用户认证 --- 三层认证…
阅读更多...
【区块链 + 智慧政务】省级一体化区块链平台 | FISCO BCOS应用案例

【区块链 + 智慧政务】省级一体化区块链平台 | FISCO BCOS应用案例

在加强数字政府建设的大背景下&#xff0c;科大讯飞广泛应用数字技术于政府管理服务&#xff0c;推动政府数字化、智能化运行。同时&#xff0c; 统筹推进业务、数据和技术的融合&#xff0c;提升跨地域、跨层级、跨部门和跨业务的协同管理和服务水平。 当前政务信息化建设中&…
阅读更多...
交易员需要克服的十大心理问题

交易员需要克服的十大心理问题

撰文&#xff1a;Koroush AK 编译&#xff1a;Chris&#xff0c;Techub News 本文来源香港Web3媒体&#xff1a;Techub News 一个交易者在交易上所犯下的最大的错误可能更多来自于心态的失衡而并非技术上的失误&#xff0c;类似的情况已经发生在了无数交易者身上。作为交易者…
阅读更多...
[论文笔记]RAPTOR: RECURSIVE ABSTRACTIVE PROCESSING FOR TREE-ORGANIZED RETRIEVAL

[论文笔记]RAPTOR: RECURSIVE ABSTRACTIVE PROCESSING FOR TREE-ORGANIZED RETRIEVAL

引言 今天带来又一篇RAG论文笔记&#xff1a;RAPTOR: RECURSIVE ABSTRACTIVE PROCESSING FOR TREE-ORGANIZED RETRIEVAL。 检索增强语言模型能够更好地适应世界状态的变化并融入长尾知识。然而&#xff0c;大多数现有方法只能从检索语料库中检索到短的连续文本片段&#xff0…
阅读更多...
shark云原生-日志体系-filebeat高级配置(适用于生产)-更新中

shark云原生-日志体系-filebeat高级配置(适用于生产)-更新中

文章目录 1. filebeat.inputs 静态日志收集器2. filebeat.autodiscover 自动发现2.1. autodiscover 和 inputs2.2. 如何配置生效2.3. Providers 提供者2.4. Providers kubernetes2.5. 配置 templates2.5.1. kubernetes 自动发现事件中的变量字段2.5.2 配置 templates 2.6. 基于…
阅读更多...
无法访问。你可能没有权限使用网络资源。请与这台服务器的管理员联系以查明你是否有访问权限。【解决办法】

无法访问。你可能没有权限使用网络资源。请与这台服务器的管理员联系以查明你是否有访问权限。【解决办法】

问题描述 新建好一台windows虚拟机&#xff0c;两台设备网络是互通的&#xff0c;但是物理机在访问虚拟机的网络共享文件资源时&#xff0c;出现图下所示的报错&#xff1a;XXX无法访问。你可能没有权限使用网络资源。请与这台服务器的管理员联系以查明你是否有访问权限。用户…
阅读更多...
LoRaWAN网络协议Class A/Class B/Class C三种工作模式说明

LoRaWAN网络协议Class A/Class B/Class C三种工作模式说明

LoRaWAN是一种专为广域物联网设计的低功耗广域网络协议。它特别适用于物联网&#xff08;IoT&#xff09;设备&#xff0c;可以在低数据速率下进行长距离通信。LoRaWAN 网络由多个组成部分构成&#xff0c;其中包括节点&#xff08;终端设备&#xff09;、网关和网络服务器。Lo…
阅读更多...
MATLAB engine for python调用m文件函数输出变量值python调用MATLAB函数混合编程

MATLAB engine for python调用m文件函数输出变量值python调用MATLAB函数混合编程

MATLAB engine for python调用m文件函数输出变量值python调用MATLAB函数混合编程 说明(废话)解决方案总结 说明(废话) python调用MATLAB函数&#xff0c;MATLAB函数实现在m文件&#xff0c;python直接调用MATLAB中的函数。 首先还是要安装好MATLAB engine python setup.py ins…
阅读更多...
技术文件国产化准备

技术文件国产化准备

技术文档的本地化涉及调整内容以满足特定目标市场的文化、语言和技术要求。这一过程超越了简单的翻译&#xff0c;确保文件在文化上适合预期受众&#xff0c;在技术上准确无误。适当的准备对于成功的本地化至关重要&#xff0c;以下步骤概述了一种全面的方法。 分析目标受众 …
阅读更多...
勇攀新高峰|暴雨信息召开2024年中述职工作会议

勇攀新高峰|暴雨信息召开2024年中述职工作会议

7月8日至9日&#xff0c;暴雨信息召开2024年中述职工作会议&#xff0c;总结回顾了上半年的成绩和不足&#xff0c;本次会议采用线上线下的方式举行&#xff0c;公司各部门管理人员、前台市场营销人员参加述职&#xff0c;公司领导班子出席会议。 本次述职采取了现场汇报点评的…
阅读更多...
关于数组的常见算法

关于数组的常见算法

一、案例一 案例说明 案例&#xff1a;定义一个int型的一维数组&#xff0c;包含10个元素&#xff0c;分别赋一些随机整数&#xff0c;然后求出所有元素的最大值&#xff0c;最小值&#xff0c;总和&#xff0c;平均值&#xff0c;并输出出来 要求&#xff1a;所有随机数都是两…
阅读更多...
51单片机：电脑通过串口控制LED亮灭(附溢出率和波特率详解)

51单片机：电脑通过串口控制LED亮灭(附溢出率和波特率详解)

一、功能实现 1.电脑通过串口发送数据&#xff1a;0F 2.点亮4个LED 二、注意事项 1.发送和接受数据的文本模式 2.串口要对应 3.注意串口的波特率要和程序中的波特率保持一致 4.有无校验位和停止位 三、如何使用串口波特率计算器 1.以本程序为例 2.生成代码如下 void Uar…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发